【vue3基础】vite项目引入iconfont的方式项目中经常要用到很多种图标，UI框架自带的图标可能没有那么多，就需

项目中经常要用到很多种图标，UI框架自带的图标可能没有那么多，就需要借助不同的图标库，我比较喜欢使用 iconfont 图标库，使用方法简单，并且图标种类比较多。

1. 进入iconfont官网挑选图标

如果图标比较多，一个个点比较麻烦的话，可以打开F12控制台输入以下代码。

var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
     console.log(span[i].querySelector('span').click())
}

直接回车，然后耐心等待一下，如果图标比较多页面可能会卡住。

2. 选择引入方式

3. 项目中引入

在项目的 index.html 文件中添加以下代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    // 引入刚刚仓库中复制的地址，记得加 https://
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4667754_irud23n64js.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

4. vue文件中使用

<i class="iconfont icon-baoxian"></i>

// iconfont 是必须要写的
// icon-baoxian  这是仓库中图标的名称了

然后页面就显示了，引入的图标是黑色的，可以在公共的样式表中设置图标的颜色和样式。

★★★★★ 每次往仓库中加新的图标，都需要重新复制链接，替换 index.html 中引入的链接。

5. 离线方式

然后找到公共样式文件，编写如下代码：

@font-face {
  font-family: "iconfont"; /* Project id 4783486 */
  src: url("//at.alicdn.com/t/c/font_4667754_irud23n64js.woff2?t=1734335927071") format("woff2"), 
       url("//at.alicdn.com/t/c/font_4667754_irud23n64js.woff?t=1734335927071") format("woff"), 
       url("//at.alicdn.com/t/c/font_4667754_irud23n64js.ttf?t=1734335927071") format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

然后页面使用

<i class="iconfont">&#x101d9;</i>

// &#x101d9; 这个就是图标的名称

这个就是在线和离线的2种方式，2种方式在图标仓库改变的时候必须要重新替换链接。