Question

我想用和svg替换超棒的字体图标。

例如，如果css类是class="'fa fa-square'"，如何更改它以使用具有相同形状square.svg的svg文件？

Answer 1

所有字体超赞的svg都位于此方便的github存储库中 Font Awesome SVG's

您可以将svg插入跨度中，如下所示：*请注意，您需要更改内联的高度和宽度，但视图框保持原样。要更改svg的颜色，请使用fill：#colorvalue

<span>
    <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 416v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z"/></svg>
</span>

Answer 2

我也有同样的愿望，并通过Icomoon.io找到了自己的路：

您可以（免费）使用漂亮的GUI生成仅包含所选图标的字体：

In picture: Icomoon - GUI

（对不起，我无法在此处嵌入图片，我是SO的新手，并且没有足够的“信誉”。）

还提供了CSS和HTML：

In picture: Icomoon - GUI 2

唯一的缺点是，免费套餐不包含WOFF2文件（但是您会获得.eot，svg，ttf和woof-您可能会在线找到woff2生成器）

您更喜欢SVG吗？没问题，它也提供了！

In picture: Icomoon - generate SVG

用svg替换字体真棒图标

2 个答案: