如何使用 svg 图标,就像“font Awesome”图标一样

Unb*_*ble 5 html javascript css svg font-awesome

我是前端开发的新手。我正在经历的示例项目之一使用“font Awesome”图标而不是图像。Font-Awesome Link<img src>我发现的不是所有地方,而是<i class= "">。我研究了一下,发现这些图标基本上都是 svg 文件。因此,我创建了几个 svg 文件用于学习目的。但我不知道如何正确包含 svg 文件。

问题 1:所以我将 svg 文件放入我自己的项目中,并像 <img src = "images/sms_connect_logo.svg"/>. 我可以看到该图标,但这是添加图标的正确方法吗?我想使用类似的方法<i class = "blabla">来获得所需的结果,就像在示例项目中完成的那样。

问题2:目前我创建的图标是黑色的。我希望它的颜色是浅灰色的。那么我是否需要创建另一个具有浅灰色相同图标的 SVG 文件,以便可以通过一些 css 调整将相同的黑色图标更改为灰色。(使用 SVG 文件的强大功能)。

我是全新的,所以我可能没有以正确的方式提出问题。如果我遗漏了什么,请告诉我。

谢谢!

plo*_*ng0 5

我使用Icomoon构建自定义图标字体。您可以从 fontawesome 和其他图标库导入图标,还可以轻松添加您自己的图标。

这也很好,因为您可以只选择应用程序所需的图标,这可以大大减少 css 和字体文件的大小