Nuxt 项目引入 iconfont 小图标详解

1. 首先进入 iconfont 的官网，选取自己想要的图标然后把它们下载到本地，这里我下载的都是svg格式文件。
2. 点击 资源管理-我的项目 进入到“我的项目”页面，新建一个项目（如：homepage）
3. 然后把你下载的图标加入到项目里面 上传后项目中就有图标啦
4. 将选好的图标下载到本地
5. 下载好的文件解压后如下所示： 其中有几个是不需要的，比如demo_index.html demo.css
6. 将需要的按照分类添加入项目中fonts 里面放字体文件； css 文件夹里面放 css； 文件 js 文件夹里面放 js 文件
7. 注意iconfont.css里的文件路径
8. 在 nuxt.config.js 文件里添加配置

css: [
  @/assets/styles/iconfont.css
],
plugins: [
  // ssr: Boolean (默认为 true) 如果值为 false，该文件只会在客户端被打包引入
  {
          
    src: @/assets/js/iconfont.js, ssr: false }
]

9. 使用字体图标

① 大家既可以在 html 中以类名的形式使用，也可以在伪类的 content 中使用

<div>
  <i class="iconfont iconmessage"></i>
</div>

<style>
  .nav-btn span:hover {
           
    
    color: #fff;
  }

  .nav-btn::before {
           
    
    content: "e603";
    font-family: "iconfont";
    color: #fff;
  }
</style>

<style>
  .nav-btn span:hover {
          
   
    color: #fff;
  }

  .nav-btn::before {
          
   
    content: "e603";
    font-family: "iconfont";
    color: #fff;
  }
</style>

② 还可以通过 Symbol 方式引用

1. 引入项目下面生成的 js 代码：

👆第9步已配置

2. 加入通用 CSS 代码（引入一次就行）：

<style>
  .icon {
          
   
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

3. 挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-phone"></use>
</svg>

【总结】：三种使用方式选择其中一种即可，不需要把所有的文件都加入项目中