为什么导入的图标库的图标未显示在VUE中？

问题描述

我正在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

解决方法

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

<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>