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

【问题标题】：How to Replace the Web Font with SVG icon in CSS(Font Awesome)?如何在 CSS（Font Awesome）中用 SVG 图标替换 Web 字体？
【发布时间】：2021-10-16 07:45:09
【问题描述】：

我注意到在我的 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";
}

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

【问题讨论】：

看这个：stackoverflow.com/questions/22179094/…
我不太清楚，你是说你不想显示 Fontawesome 图标而是想显示你自己的 SVG？
@AHaworth，很抱歉造成混淆。我确实想显示 Fontawesome 图标，但不要使用 Web 字体方法，因为这意味着我需要将 Web 字体文件与我的网页一起包含并下载。我想使用来自 Fontawesome 的单个 SVG 图标或 SVG Sprites 来提高性能。由于 Fontawesome 图标允许在 Web 字体或 SVG 图标中使用，它的 CSS 伪元素也应该支持所有这些方法，尽管我在他们的文档中找不到信息。

标签： css svg fonts icons font-awesome

【解决方案1】：

Web 字体确实是一个很棒的想法，并且非常有用，它可以让您拥有响应式无样式图标来进行 Web 开发。但是现在这并不是一个好主意，因为每个主要浏览器都支持 svg 标准，安装或通过 CDN 调用一个消耗资源供您使用的网络字体是没有意义的，您的应用程序上有多少、十个图标或网站？因此，例如，最新版本的 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 图标内放置一个填充。

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

上图中显示了图标的 css 类、acssi 引用和红色圆圈内的可选项。

抱歉打错了，但我现在在手机上，这里没有眼镜。

【讨论】：