我是前端开发的新手。我正在经历的示例项目之一使用“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文件的强大功能）。
我是全新的所以我可能没有以正确的方式提问。如果我遗失了什么，请告诉我。
谢谢！
答案 0 :(得分：2)
我使用Icomoon来构建自定义图标字体。您可以从fontawesome和其他图标库导入图标，还可以非常轻松地添加自己的图标。
这也很好，因为您只能选择应用所需的图标，这可以大大减少CSS和字体文件的大小
答案 1 :(得分：-1)
1）在CSS文件中定义字体的路径（将其添加到文件顶部）
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
2）字体集合中的每个图像都有一个类名。您可以在UI控件中使用这些名称。例如：
<span class='fa fa-bicycle'></span>
要查找每个图标的类名，请单击图像（在字体很棒的网站中），然后它会转到一个页面，其中的示例显示与该图标关联的类名。