用 svg 替换字体真棒图标答案

【问题标题】：Replace font awesome icon with an svg用 svg 替换字体真棒图标
【发布时间】：2019-02-24 21:09:22
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

所有字体很棒的 svg 都位于这个方便的 github 存储库中 Font Awesome SVG's

您可以将 svg 插入到 span 中，如下所示： *注意您需要更改内联的高度和宽度，但保持视图框不变。要更改 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>

【讨论】：

【解决方案2】：

我有同样的愿望，并找到了Icomoon.io的方式：

您可以（免费）生成仅包含您选择的图标的字体，并带有漂亮的 GUI：

In picture: Icomoon - GUI

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

还提供了 CSS 和 HTML：

In picture: Icomoon - GUI 2

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

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

In picture: Icomoon - generate SVG

【讨论】：