用 svg 替换字体真棒图标

Question

我想用 svg 替换一个字体很棒的图标。

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

Answer 1

所有 font-awesome svg 都位于这个方便的 github repo Font Awesome SVG's

您可以将 svg 插入到跨度中，如下所示：*注意您需要更改行内高度和宽度，但保持视图框不变。 要更改 svg 的颜色，请使用填充：#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：

图片中：Icomoon - GUI

（对不起，我不能在这里嵌入图片，我是新来的，没有足够的“声誉”..）

还提供了 CSS 和 HTML：

图片中：Icomoon - GUI 2

唯一的缺点是，免费套餐不包括 WOFF2 文件（但您可以获得 .eot、svg、ttf 和 woff - 您可以在网上找到 woff2 生成器）

你更喜欢SVG？ 没问题，它还提供！

图片中：Icomoon - 生成 SVG