Javascript 如何使用svg图标，就像；字体真棒“；图标

我不熟悉前端开发。我正在经历的一个示例项目使用“字体很棒”图标而不是图像。我找到的不是

，而是

。我研究了一下，发现这些图标基本上都是svg文件。因此，为了便于学习，我创建了两个svg文件。但我不知道如何正确地包含svg文件

问题1:所以我将svg文件放在我自己的项目中，并像

那样调用它们。我可以看到图标，但这是添加图标的正确方式吗。我想使用类似于

的东西来获得所需的结果，因为它是在示例项目中完成的

问题2:目前，我创建的图标是黑色的。我希望它是浅灰色的。因此，我需要创建另一个SVG文件，该文件具有相同的图标和浅灰色，以便通过一些css调整将相同的黑色图标更改为灰色。（使用SVG文件的强大功能）

我是一个全新的人，所以我可能问得不对。如果我遗漏了什么，请告诉我

谢谢

我用于构建自定义图标字体。您可以从fontawesome和其他图标库导入图标，还可以非常轻松地添加自己的图标

---

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

但是，一旦我有了图标，我如何创建精灵以及如何创建“包含文件”，该文件将采用名称并从精灵中放置正确的图标。换句话说，是否有一个实用程序可以帮助我创建自己的自定义“字体很棒的替换”字体？@pashute您所描述的正是icomoon应用程序所做的-从不同的图标集选择图标（例如字体很棒），甚至导入您自己的精灵（例如svg图像）。选择你想要的图标后，点击“生成字体”按钮，它会给你一个包含字体和CSS文件的zip文件。这太棒了！例如，icomoon附带了一个重要的警告：SVG笔划不会导出！（只有填充是。）所以大多数图标都可以工作，但一些（可能有更多细节）在导出后将无法存活！！