iconfont symbol引用，展示彩色字体图标

迷南。 2023-01-12 11:59 279阅读 0赞

**1.去阿里巴巴图标库中找到自己的项目，选择symbol ，下载到本地。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]  
**2.将下载后的文件解压找到iconfont.js文件，copy到项目。我是在static 下面新建的一个名为iconfont的文件夹。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]  
**3.并在同级目录下新建一个 icon.css文件**

![在这里插入图片描述][20210128152210153.png]  
**4.在icon.css中粘贴下面代码。**

通用css代码：

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

**5.在main.js导入**

import './assets/iconfont/iconfont.js'
    import './assets/iconfont/icon.css'

![在这里插入图片描述][20210128152633461.png]  
**6.这样就可以使用了**

xlink:href后的用户名在lconfont官网可以看到->右键icon复制代码即可

**7.效果图：**  
![在这里插入图片描述][2021012815281918.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70]: /images/20221119/8abc9494562a4cd494abb653952e5c2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQzMzQ5OQ_size_16_color_FFFFFF_t_70 1]: /images/20221119/9738d42a77c94e42aa9045fffab8f4e9.png
[20210128152210153.png]: /images/20221119/e0e12b7ff911400e83dd4ab5084ac73b.png
[20210128152633461.png]: /images/20221119/61ea0fdc88b54b56b318db9aca895ffe.png
[2021012815281918.png]: /images/20221119/e401c8bb288341c8b2d8608b567b481e.png