I downloaded the bootstrap template, but I can't figure out where the images are stored smile and tachometer. I have not found them among other svg images or other format.
It seems to me they are stored somehow differently, but a search on fa-tachometer-alt shows me the css files. Perhaps the image is drawn through css. But I don't understand how this is done?
Thats not an image itself its a webfont called font-awesome
Related
TL;DR: Is it possible to load other images based on media-query from svg included via img tag?
I generate a bunch of svg files with have tables with text and icons inside. A PDF would be semantically a better container, but I need to keep such "documents" as images for seamless embed/preview and it probably won't solve my problem. So the story is about icons.
I wrote inline styles with media queries picking icons corresponding to user's screen DPI. Icons are already bundled into sprites, so I use pattern/image[xlink:href] + fill:url(#id). Everything works as needed when I embed svg directly into HTML (DOM islands). But if I embed svg via img tag (i.e. <img src="foo.svg">), it doesn't load icons at all, let alone showing them.
I understand, that I can embed icons via data-URL, but embedding icons for all supported screen dpis seems too much. The irony is that icons are raster ones, hardly vectorizable pixel-art, so I cannot have one set of icons for all DPIs.
Is there a way to have proper icons picked by media query w/o embedding them all?
You can't load external files from an SVG used in an <img> tag (or used in other "image" contexts, like CSS background images). For security and performance reasons, SVG used as image has to behave like any other image -- a single file, no secondary resources and no scripts.
If you don't want to use inline SVG, you might consider embedding an SVG file with an <object> tag or <iframe>. However, I recommend that you actually test carefully to see whether browsers are downloading the image files even if they aren't using them because of CSS.
So since it's not possible to load conditionally: either embed or not, I should do some clever detection about raster sets. Technically not a direct answer, but in case someone needs.
I decided to go with cookies. People visit normally the same site that hosts those SVG.
I'd set a cookie for their DPI and then all SVGs served would pick proper DPI images.
For people who haven't visited the site yet, I'd go with UA sniffing: mobiles and macs get 2x, others 1x. Or just 1x for everyone.
Created a font-icons with material svg and custom svg files using gulp-iconfont-css. Sometimes these font-icons are not appearing with the correct icon they are actually jumbled and on refresh, all icons are arranged properly on the site.
why is it happening like this and how to solve this?
I've tried these 3 approaches out, and they all seem to give me the same result.
I tried to research to find out the different performance between them, I didn't come across anything so far.
<div class="col-lg-3"><span class="success-icon"> </span>icon</div>
<div class="col-lg-3"><i class="icon-circle-blank success"></i></span>icon</div>
<div class="col-lg-3"><img src="img/success-icon.png"></span>icon</div>
I'm wondering which way is the most efficient way to do and why ?
From a performance perspective, a sprite image set or font icon would be preferable to using a single image for an icon. Still, using too many custom fonts can create some performance issues if you use a lot of them and a sprite image set is not always easily applicable to every situation or design.
If using font icons, use something like Fontello to compile a custom font icon library that only includes what you need so that the size of your font library is minimal.
If using sprite image sets, use tools like Dan's Tools Sprite Generator to render your sprite images with different alignment and different spacing to make it work for your project.
Don't use single images for each icon.
I know there are tools to generate a sprite image and CSS from a collection of images.
But, is there a way to generate the CSS against an existing sprite image.
I was given a sprite image as-is with no CSS and am looking for a way to auto-generate the CSS instead of having to hand code it.
Like:
http://www.spritecow.com/ ?
http://www.spritebox.net/ ?
A simple Google search shows a lot of sites that will help you with this.
Is there a better way to change few images from a single file which was generated for CSS Sprites.
As I have a big image file which contains 50 small images and my css uses Sprites. Now I wants to chage 4 button's colors and size of s pointers. What will be the best possible way?
Use any CSS Sprites Generator like Spritemapper.
BTW, I create ZeroSprites which is an online sprites generator aimed at area minimization using VLSI floorplanning algorithm.
Edit your sprite file in a image software like Photoshop or GIMP.
Add new images on the bottom of the existing sprite file. That way, you can keep the existing positions of your sprites.
If you want to find to the css pointers, use the measuring tools in your image software.