So in this pen you can see the little search bar icon. But when I open that in the app I am creating in visual studio the search box icon disappear. Codepen:
In website it is white and blank:
I can barely see it because of the lack of color contrast, but yes, it is there.
When I narrow my browser I’m getting a horizontal scroll bar and am able to scroll to the right to see those icons (though they are not on the blue background any more). I think you just need to work on responsiveness. I’d recommend a narrow-first approach. Narrow your browser in as far as it will go and style the page so it looks good at that narrow width. There should be no horizontal scroll bar and you should be able to see all of the elements on the page. Then once you have that done you can widen the page and add media query break points for wider view ports and rearrange the elements to take advantage of the wider screen.
Sorry it was the wrong code in that Pen. I have changed the code in the Pen now so you can see what I mean now.
In the website you can see an icon like a looking glass. But that one is gone on my website/app.
Anyone knows about this?
You gave us a link to your codepen and the magnifying glass icon seems to be working fine. The url you are using (https://i.imgur.com/seveWIw.png) seems to be working. So I’m not quite sure what problem you are having? Can you please be more specific?
I mean it’s just an URL to an image link for a png file. Is the site local or live?
But I would not recommend using imgur as a CDN for app icons, it is also against the TOS and may be blocked as they see fit.
Also, don’t use Imgur to host image libraries you link to from elsewhere, content for your website, advertising, avatars, or anything else that turns us into your content delivery network.
The site is local.
Looks like this in my own site where the looking glass does not appear:
I have no idea why the looking glass disappears in the site but is visible on Codepen.
What do you mean by “my own site”? Are you hosting this on a server somewhere? If so, please give us the URL. Or are you just opening the HTML file directly from your local filesystem? Perhaps open your browser’s JS console and see if there are any error messages associated with loading the image?
No I mean in Visual Studio. Not a live site this one
You can check the network tab in the browser dev tools to see if it is getting blocked. I see a 403 Forbidden when I try to use it locally (with https). As I said, do not use imgur as a CDN.
Interesting. I am able to load the image both when I open the page directly from the filesystem and through my local web server (although I am not using https).
Regardless, I agree, don’t use imgur as a CDN.
@bbsmooth Are you saying it loads for you when used as an img element or a background-image? I get 403 for both, no matter the protocol.
-
Download it and use it. Or upload it somewhere else (like GitHub and use the raw version for the link).
-
Use an inline svg instead, like this one from Feather
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
- Use Font Awesome or some other icon lib
As a CSS background image. I used the exact CSS that the OP is using in codepen.
This was going to be my recommendation as well. Thanks for taking care of that 
Well, now it worked in Firefox when I tested it (with both http/https) but not in Chrome. Not sure what is going on. Anyway, the point about not using it as a CDN still stands.
What is imgur again? What does that mean. Cannot remember what CDN meant either. Have taken a break from coding and came back so don’t remember all the terms.
imgur is the host you are using for the icon, imgur.com
CDN = content delivery network
Why is that so important? That I don’t use Imgur?
I have no idea what you mean by that 
A bit confused.
I am using Codepen. In what way am I using Imgur?
imgur.com is the web server that the magnifying glass icon you are using is hosted on. In your CSS you have the background set to url(https://i.imgur.com/seveWIw.png). This means “contact the imgur.com web server and ask for the seveWIw.png file and then use it for the icon on my page.” They don’t want people to do that.
Aha ok. I will try that
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.