CODEWITHSUNDEEP
csssvgiconsbackground-imageglyphicons
Kamafeather
Kamafeather

Reputation: 9845

Use <glyph> as 'background-image', taken from a single SVG

I know that I can use a single SVG file per-icon and then use it as background-image with:

.my-button {
    background-image: url(binaries/icons/my-icon.svg);
}

or

that I can have the glyphs defined with an unicode value and then add it in my styles relying on the content applied in a :after/:before pseudo-element, like this:

<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="&#xe800;" 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="&#xe805;" 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 having a base class plus a decorator class for the specific icon, like this:

.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 would it be possible to directly reference a glyph in a single SVG file, probably with an absolute/relative path, and use it as backgound-image url(), without defining an additional class but just applying the style to my desired one (my-button in this case). Something like (just an example, I don't know what the right URI format should be):

.my-button {
    background-image: url(binaries/icons/my-fontello-font.svg?font=fontello#my-icon
}

This would be perfect to:

Is there a way to do that?

Upvotes: 5

Views: 4178

Answers (1)

Dracco
Dracco

Reputation: 443

I've had a brief dig through the topic (was searching for it and found that question). From what I've found out, there could be a way to do it, but it has lacks in browser support.

What I think of is having a little parser (like a simple grunt task) that would change glyphs into views and paths and then use them as described here: https://css-tricks.com/svg-fragment-identifiers-work (background-image method).

Hope that could guide you somewhere. I'll probably dig this topic a bit further, but so far it only seems to be possible that way (so not in every browser).

Upvotes: 1

Related Questions