为什么导入的图标库的图标在VUE中显示不出来？

Question

我正在 Vue 开发我的第一个应用程序，我必须说我很难找到实际的例子和完整的信息来解决我遇到的所有问题。现在我正在尝试使用我用 iconomoon 创建的图标字体。我已经将它导入到我的项目中，并且我已经将它声明为我的样式中的字体，将我想要测试的图标的声明导入到相同的样式中。起初我有一个 webpack 配置错误，我已经更正了，但是当我在我的 html 模板中声明我的图标时，只出现一个带边框的框，但没有显示图标

这是我的模板

               <header>
                <nav class="navbar navbar-expand-lg navbar-light header">
                  <img class="logo" src="../../assets/logo.png">
                  <i class="icon-ic-fluent-home-24-regular"></i>

这是我的 css

<style>

 @font-face {
    font-family: "icomoon";
    src: url(../../icons/icomoon.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
  }

.icon-ic-fluent-home-24-regular:before {
  content: "\e908";
}
[![project strucutre][1]][1]

</style>

谁能告诉我我的错误是什么？非常感谢您的宝贵时间和提前帮助

[![图中的正方形对应于它显示的内容而不是][1]][1] [1]: https://i.stack.imgur.com/btYW0.png

Answer 1

您需要告诉图标使用您创建的字体：

<i class="icon icon-ic-fluent-home-24-regular"></i>


<style>

 @font-face {
    font-family: "icomoon";
    src: url(../../icons/icomoon.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
  }

.icon {
    font-family: "icomoon"
} 

.icon-ic-fluent-home-24-regular:before {
  content: "\e908";
}


</style>

为什么导入的图标库的图标在VUE中显示不出来？

Why are the icons of the imported icon library not displayed in VUE?

css

fonts

icons

vue.js