nuxt項目中怎么使用iconfont圖標

nuxt 項目引入 iconfont 小圖標

1. 首先進入 iconfont 的官網https://www.iconfont.cn/選取自己想要的圖標然后加入到項目里面
2. 將選好的圖標下載到本地
   
3. 下載好的文件中有幾個是不需要的
   下載好的文件解壓后如下所示：
   
   其中有幾個是不需要的
4. 將需要的按照分類添加入項目中
   
   fonts 里面放字體文件 css 文件夾里面放 css 文件 JS 文件夾里面放 JS 文件
5. 使用字體圖標
   大家既可以在 html 中以類名的形式使用，也可以在偽類的 content 中使用

<div>
  <i class="iconfont icon-shouye"></i>
</div>
<div>
  <i class="iconfont icon-qq"></i>
</div>
<div>
  <i class="iconfont icon-weixin"></i>
</div>
<div>
  <i class="iconfont icon-tubiaozhizuo-"></i>
</div>
<div>
  <i class="iconfont icon-github"></i>
</div>

.toolbar-item {
  padding-left: 20px;
  span:hover {
    color: @color-white;
  }
  &::before {
    content: "\e604";
    font-family: "iconfont";
    color: @color-white;
  }
}

6. 如果報錯提示路徑不對了可以去iconfont.css中修改下字體文件的路徑即可