记录 nuxt3 使用阿里巴巴图标库 iconfont

资源地址

1. iconfont 网址：www.iconfont.cn/ （在使用相应的图标前，还是确认下是否可以商用吧！）

2. 参考视频【nuxt使用阿里巴巴图标库】www.bilibili.com/video/BV1kc…

使用步骤

1. 进入 iconfont 官网，选择图标 -> 添加入库 -> 添加至项目 -> 下载至本地。

2. 下载后解压 zip 文件，大致是下面一些文件：

   -rw-rw-r--@ 1 swot  staff  8429 Feb  8 10:36 demo.css
   -rw-rw-r--@ 1 swot  staff  8980 Feb  8 10:36 demo_index.html
   -rw-rw-r--@ 1 swot  staff   520 Feb  8 10:36 iconfont.css
   -rw-rw-r--@ 1 swot  staff  3977 Feb  8 10:36 iconfont.js
   -rw-rw-r--@ 1 swot  staff   457 Feb  8 10:36 iconfont.json
   -rw-rw-r--@ 1 swot  staff  2040 Feb  8 10:36 iconfont.ttf
   -rw-rw-r--@ 1 swot  staff  1376 Feb  8 10:36 iconfont.woff
   -rw-rw-r--@ 1 swot  staff   976 Feb  8 10:36 iconfont.woff2
   

3. 将上面文件们复制到 nuxt3 的 assets 目录下（最好在 assets 目录下再新建个目录放在里面，如 iconfont 目录），nuxt3 在打包时会自动将 assets 目录下的文件打包。

4. 修改文件 iconfont.css (注意 url 中字体文件的路径)

     @font-face {
     font-family: "iconfont"; /* Project id 4304803 */
     src: url('iconfont.woff2?t=1707359812251') format('woff2'),
          url('iconfont.woff?t=1707359812251') format('woff'),
          url('iconfont.ttf?t=1707359812251') format('truetype');
   }
   

5. 修改 nuxt3 配置文件 nuxt.config.js

   css: ["~/assets/iconfont/iconfont.css"],
   // css: ["@/assets/iconfont/iconfont.css"],  // 也可以
   

6. 使用 iconfont 图标

   <template>
       <div style="height: 500px; padding-top: 400px; padding-left: 200px;">
           <!-- Unicode 引用 -->
           <i class="iconfont" style="font-size: 100px;">
               &#xe61e;
           </i>
           
           <!-- font-class 引用 -->
           <i class="iconfont icon-shouye-zhihui"
              style="color: red; font-size: 50px">
           </i>
       </div>
   </template>