I want to replace fa fa-calculator with an image link, how can I do that. I am new to all this and just trying to get my head around.
The icons are fonts bro, so just replace all the tag with an
<img src="yourimage">
And remember to change with an image with a little size, like an icon.
In the internet are a lot of set of icons so i dont recommend to change the icons with images.
If it's an image link its just
<img src="yourimage">
Related
Dear stackoverflow Users,
im trying to use a Glyph of a Font on my Website. I want to place "↗ produkte", but the Browser displays The Arrow up as a blue Icon.
What it looks like right now:
Blue Arrow
What i want to Archive, is that the browser displays the arrow of the font kit: Font Arrow
Do you now a Way to archive that? I could place it as a SVG image in the p Tag but is there a Way to Use the Glyph ↗ in the p Tag too?
Thanks!
I am trying to setup a header for one of my map animations. I can place the logo and one more image on the header, more or less, but if I resize the browser the images stay with the same size.
Can anyone tell me what is wrong?
here is a link to see
The source code is available in github as you can see.
Thanks for your time
Try this
<img src="images/logo-b.jpg" style="width:35%;">
<img src="images/wave_b.jpg" style="width:60%;">
I am fairly new to svg and webfonts, and I have some svg logos which I would like to embed in my web page (and make sure they are visible on various device types)
I have tried the icon-font-generator (https://github.com/Workshape/icon-font-generator), to create web fonts, but I am not sure if this is the right approach or should I use img tag , i.e. <img class="svg" src="../svg/Tensorflow_logo.svg">
I don't want to give fixed height and width and all logos should appear of the same size. Is web fonts the right approach, and how do I need to create webfonts maintaining the original colors of the trademark logos.
Thanks,
You can easily turn your SVG files into fonts using the
icomoon.io .
1.select SVG
2.select Color section for create color pattern
3.select and create color pattern and click Add theme button
4.select Edit icon and click on the SVG in page
5.in edit page select svg section by section and select color
Once you have reached the desired shape, you can close the edit page
6.click on generate font and download
I'm adding double-sized images to my web site, and then squishing those images back down with the CSS background-size property, which appears to be a common way to deal with our new high-res retina reality.
Is there a proper way to add alt text to a background image, or, how do I provide alt text for the images I'm working with with this technique?
I've considered using retina.js which would solve this problem, but then I'm using up bandwith serving a regular-size image and a double-size image.
I know there are other posts on stackoverflow and elsewhere that discuss alt text and background images, but the posts I've found date back to before retina displays.
I've seen posts that state alt text shouldn't be applied to background images, so what do people suggest?
Alt="Is for Meaningful Images."
Alt text is a generally necessary if the image has meaningful content. For instance, this photo of my laptop has content.
Images like this should be placed in an <img> tag with the appropriate alt text to convey the purpose of the image in text form.
On the other hand, background images, icons, patters, etc. these are not meaningful, content driven images. Rather, they are purely aesthetics and not contributing to the an article's content. These icons that link to something, that's what the <a title=""> attribute is for, so use it.
ALT = Content driven images.
And BTW, you cannot add and alt tag on a background image, unless you cheat and add a title value on the tag of interest.
In my website I have an image as the navigation bar and have created hotspots to link them to different pages. The problem is since the text is a part of the image, I cannot change the style of the text on hover. Whereas I want the text/the hotspot to stand out on mouseover, so I learn the background color could be changed on mouse over. Is that possible? Is there a way to do that in CSS, using the area or maps. If Javascript is to be used, could someone help me out with it.
Is there a reason you've used a single image as the nav bar?
Instead of a single image with hotspots, I'd use an individual image for each navigation link. That way you can easily change the image (or use CSS image positioning) on hover. This is described here:
http://css-tricks.com/video-screencasts/7-three-state-menu/
along with many other places I'm sure.
I don't think it's a good idea to use neither image maps nor individual images.
Instead, use CSS sprites: a single image file, add that as a background image to the menu links, but position the background images differently. See this Line 25 tutorial for more information.