如何在 CSS 中用 SVG 图标替换 Web 字体（Font Awesome）？

我注意到在我的 CSS 文件中，有一些使用 Font Awesome Web 字体的规则，如下所示：

ul.fancy li:before, .category-page ul li:before {
    display: none;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
}

现在我想用 Font Awesome 的 SVG 图标或 SVG Sprites 替换它。由于 Fontawesome 图标允许在 Web Font 或 SVG 图标中使用，因此它的 CSS 伪元素也应该支持所有这些方法。只是想知道如何做到这一点？我查看了Font Awesome网站，没有找到关于这种情况的相应文档。

Web 字体确实是一个好主意，对于您为 Web 开发提供响应式无样式图标来说非常有用。但现在这并不是一个好主意，因为每个主要浏览器都支持 svg 标准，因此安装或通过 CDN 调用 Web 字体是没有意义的，它会消耗资源供您使用，您的应用程序上有多少个、十个图标或网站？ 例如，最新版本的 font Awesome 带有一个 src 文件夹，其中包含 svg 格式的所有图标。 也就是说，还有另一种简单的方法可以让您从字体中获取图标并将其转换为 svg。假设您已将字体安装到系统中。然后，您下载字体的备忘单并在浏览器上打开它，查找所需图标的可选版本，然后选择它并复制。然后打开 Inkscape 并获取文本工具并粘贴选定的图标。在字体选择器中查找字体并将其应用到刚刚复制为文本的图标。然后将文本转换为路径并保存为svg。

下一步是创建一个 CSS 系统来放置图标而不是字体图标。只要我完成了，你应该能够使用框架中创建的系统来使用字体awasome。只需打开字体 css 并查找常规样式，我的意思是，类i, icon，主要是将它们粘贴到您的 css 文件中。

现在您尝试此操作，将您提供的代码中的字体替换为背景和图标的 URL。

当然，仅对一个图标有用 如果你想要更多，你应该为自己创建一个类似的系统，就像字体的 css 使用的系统一样。 就我而言，我创建了一个类前缀simbicon-xxxx其中 xxx 代表图标的名称。我现在就给你看。

CSS

.simbicon-logout {background: url('../img/logout.svg') center no-repeat;bottom: 0;width: 36px;height: 36px;}

HTML

 <i class="icon simbicon-logout"></i>

我在项目中实际使用的几个图标的显示与字体图标完全相同。 此方法的一个警告是字体图标没有填充属性，因此它们获得主题的自定义颜色。使用此系统，您必须在每个 svg 图标内放置填充。

请注意，"\f0da";在你的CSS中指的是要从字体显示的特定图标。在备忘单中会出现一个图标图像、上面的代码和一个可选图标。最后一个是您需要选择在 Inkscape 中复制为文本的选项。

上图中显示了图标的 css 类、acssi 参考和红色圆圈内的可选内容。

抱歉，有错字，但我现在正在使用手机，而且我这里没有眼镜。