Use <glyph> as "background-image" taken from one SVG
I know that I can use one SVG file for each icon and then use it like background-image
with
.my-button {
background-image: url(binaries/icons/my-icon.svg);
}
or
that I can have glyphs defined with a unicode value and then add it to my styles based on content
applied in a: after /: before pseudo element, like:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="my-icon unicode="" d="m564 422l-234-224q-18-18-40-18t-40 18l-234 224q-16 16-16 41t16 41q38 38 78 0l196-188 196 188q40 38 78 0 16-16 16-41t-16-41z" horiz-adv-x="580" />
<glyph glyph-name="up-open" unicode="" d="m564 280q16-16 16-41t-16-41q-38-38-78 0l-196 188-196-188q-40-38-78 0-16 16-16 41t16 41l234 224q16 16 40 16t40-16z" horiz-adv-x="580" />
</font>
</defs>
</svg>
and then with a base class plus a decorator class for a specific icon like:
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'fontello';
font-style: normal;
font-weight: normal;
...
}
.glyphicon__my-iconn:before {
content: "\e800";
}
But
I was wondering if it is possible to directly reference a glyph in a single SVG file, possibly with an absolute / relative path, and use it as a backgound-image url () without defining an additional class, but simply applying the style to my desired (in in this case, my button). Something like (just an example, I don't know what the correct URI format should be):
.my-button {
background-image: url(binaries/icons/my-fontello-font.svg?font=fontello#my-icon
}
This would be ideal for:
- have only one HTTP request when loading symbolic icons
- skip defining one class for each individual icon (what if I have 200 icons?) and just use them
Is there a way to do this?
source to share
I dug the topic shortly (searched for it and found this question). From what I've learned, there may be a way to do this, but it lacks browser support.
I think I have a small parser (for example a simple grunt task) that will change glyphs to views and paths and then use them as described here: https://css-tricks.com/svg-fragment-identifiers -work (background image method).
Hope you can help somewhere. I'll probably dig this topic a little further, but for now this is the only way to do it (this is not the case in every browser).
source to share