如何在 CSS(Font Awesome) 中用 SVG 图标替换 Web 字体? [英] How to Replace the Web Font with SVG icon in CSS(Font Awesome)?

问题描述

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

I notice that in my CSS file, there are some rules which uses Font Awesome Web font, as below:

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 网站，没有找到关于这种情况的相应文档.

Now I want to replace it with SVG icon or SVG Sprites from Font Awesome. Since Fontawesome icon allows to be used in both Web Font or SVG icon, its CSS Pseudo-elements should also support all these methods too. Just wonder how to do so? I check the Font Awesome website and cannot find the corresponding document on such a case.

推荐答案

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

Web fonts were really a great idea and a very useful one for you to have responsive un styled icons for web development. But right now it's not that too much good idea since every major browser supports the svg standard it makes no sense to install, or call via CDN a web font which is consuming resources for you to use, how many, ten icons on your app or web site? So, for example, the last version of font awesome comes with a src folder in which there are all the icons on svg format. Said that, there is another easy way for you to grab the icon from within the font and turn it into a svg. Let's say you have installed the font to your system. Then you download the cheat sheet of the font and open it on the browser, look for the selectable version of the icon you want and select it and copy. Then you open Inkscape and get the text tool and paste the selected icon. Look in the font selector for the font and apply it to the icon you just copied as text. Then convert the text into a path and save it as svg.

下一步是创建一个 css 系统来放置图标而不是字体图标.只要我做了你应该可以使用框架中创建的用于使用font awasome的系统.只需打开字体 css 并查找一般 stiling，我的意思是，类 i, icon，主要并将它们粘贴到您的 css 文件中.

The next step is to create a css system to place the icons instead of the font icons. As long as I have done you should be able to use the system that was created in the framework for the use of font awasome. Just open the font css and look for the general stiling, I mean, the classes i, icon, mainly and paste them into your css file.

现在你试试这个，用背景和图标的 URL 替换你提供的代码中的字体.

Now you try this, replace the font in the code that you provide with a background and the url of your icon.

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

Of course, it will be useful just for one icon If you want more you should create yourself a similar system like the one the css of the font uses. In my case I have created a class prefix simbicon-xxxx where the xxx stands for the name of the icon. I will show you now.

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 图标内填充.

And the few icons that I actually use on the proyect get displayed exactly as the font icons did. One caveat of this method is that the font icons comes with no fill attribute so they get the custom color of the theme. With this system you have to place a fill inside each svg icon.

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

Notice that the "\f0da"; in your css refers to the specific icon to be displayed from the font. In the cheat sheet appears an image of the icon, this code above and a selectable icon. That last is the one you need to select to copy as text inside Inkscape.

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

In the image above are shown the css class of the icon, the acssi reference and the selectable which is inside the red circle.

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

Sorry for the typos but I am on my mobile now and I have no glasses here.

这篇关于如何在 CSS(Font Awesome) 中用 SVG 图标替换 Web 字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！