iconfont图标引入及线上使用流程（无需下载图标到本地）

朴灿烈づ我的快乐病毒、 2022-09-03 12:15 525阅读 0赞

![在这里插入图片描述][1da0b1a61f854a85a8cb927e07dab0cf.png]

--------------------

**1.选择图标加购物车**

1.  进入阿里巴巴矢量图标库[https://www.iconfont.cn/][https_www.iconfont.cn]
2.  输入图标名称，搜索图标
3.  找到想要的图标，加入购物车

**2.打开购物车，添加至项目**

1.  打开购物车，点击添加至项目
2.  选择项目后，点击“确定”即可完成添加（没有对应项目可添加）

**3.生成在线链接**

1.  网页导航栏 资源管理–我的项目–找到对应的项目（一般情况下以上第2条确定后自动进入到对应项目中）
2.  使用方式选择“Font class”  
    ![在这里插入图片描述][60aa9c0029844a428ec28cc20799d53f.png]
3.  生成在线链接  
    ![在这里插入图片描述][6b295dcd8e424e68b2577bd267e10071.png]

**4.项目中全局引入**（两种方式）  
不同框架的引入方式可能不同，这里以uniapp为例，在App.vue => style中引入

1.  直接引入链接(图标改动时链接需要替换成最新的)

//直接引入链接(图标改动时链接需要替换成最新的)
    @import '//at.alicdn.com/t/font_2728845_4jgp1q24y5p.css';

1.  新建iconfont.css文件(图标有改动时直接替换iconfont.css的代码)

//新建iconfont.css文件(图标有改动时直接替换iconfont.css的代码)
    @import 'static/iconfont/iconfont.css';

点击链接查看代码，全选复制  
![在这里插入图片描述][61c9e1099926448aaa3c51f95f98e6da.png]  
**5.使用图标**

*  iconfont + 图标名称
 *  样式属性font-size设置图标大小

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg4Mzg3_size_16_color_FFFFFF_t_70]

[1da0b1a61f854a85a8cb927e07dab0cf.png]: /images/20220829/6d061f2a30a04c57bc9cf9df8d994633.png
[https_www.iconfont.cn]: https://www.iconfont.cn/
[60aa9c0029844a428ec28cc20799d53f.png]: /images/20220829/e3372e7b24d245bcb01a96b09ffc2c4d.png
[6b295dcd8e424e68b2577bd267e10071.png]: /images/20220829/369210e9381f4b509aef1c6cd7c8b887.png
[61c9e1099926448aaa3c51f95f98e6da.png]: /images/20220829/4bc79a3dc43c4595863a5183dbd0db7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg4Mzg3_size_16_color_FFFFFF_t_70]: /images/20220829/f125451bb3444ece99bcc9a6d839ba58.png