Question

我知道我可以为每个图标使用一个 SVG 文件，然后将其用作background-image：

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

或

我可以使用 unicode 值定义字形，然后依赖于中应用的content将其添加到我的样式中：after /：before pseudo-element ，像这样：

<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>

然后有一个基类加上特定图标的装饰器类，如下所示：

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    ...
}

.glyphicon__my-iconn:before {
    content: "\e800";
}

但是

我想知道是否可以在单个SVG文件中直接引用字形，可能使用绝对/相对路径，并将其用作 backgound-image url（），而不定义一个额外的类，但只是将样式应用到我想要的一个（在这种情况下我的按钮）。类似的东西（只是一个例子，我不知道正确的URI格式应该是什么）：

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

这将是完美的：

在加载glyph-icons时只有一个HTTP请求
跳过每个图标的单个类的定义（如果我有200个图标？）并且只使用它们

有办法吗？

Answer 1

我已经对这个主题进行了简短的挖掘（正在搜索它并发现了这个问题）。根据我的发现，可能有办法实现，但它缺乏浏览器支持。

我想到的是有一个小解析器（就像一个简单的grunt任务），它会将字形改变为视图和路径，然后按照此处的描述使用它们：https://css-tricks.com/svg-fragment-identifiers-work（背景图像方法）。

希望能在某处指导你。我可能会进一步深入研究这个主题，但到目前为止它似乎只有这样（所以不是在每个浏览器中）。

使用<glyph>作为＆＃39; background-image＆＃39;，取自单个SVG

或

但是

1 个答案: