uni-app引入自定义图标库——Iconfont-阿里巴巴

淡淡的烟草味﹌ 2024-04-17 22:15 70阅读 0赞

### uni-app修炼之路（四） ###

*  导语
 *  \[Iconfont 官网\](https://www.iconfont.cn)
 *   *   *   *  1.首先在\[官网\](https://www.iconfont.cn)登录注册，选择你需要的图标加入购物车，可以多选
             *  2.新建项目，把购物车中的图标添加到项目，然后下载到本地
             *  3.解压后的文件如图所示，复制iconfont.css文件，粘贴到我们项目的common目录下，重命名为icon.css
             *  4.打开我们复制过来的css文件，把里面引用了但是我们没有复制过来的文件的那几行删除掉，我们一般不需要用到。
             *  5.在App.vue文件的style中引入
             *  6.在页面中使用

# 导语 #

uni-app官方提供的图标库很少，今天来介绍一下如何引入自定义图标库，介绍如何使用阿里巴巴矢量图标库。

# [Iconfont 官网][Iconfont] #

#### 1.首先在[官网][Iconfont]登录注册，选择你需要的图标加入购物车，可以多选 ####

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

#### 2.新建项目，把购物车中的图标添加到项目，然后下载到本地 ####

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

#### 3.解压后的文件如图所示，复制iconfont.css文件，粘贴到我们项目的common目录下，重命名为icon.css ####

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

#### 4.打开我们复制过来的css文件，把里面引用了但是我们没有复制过来的文件的那几行删除掉，我们一般不需要用到。 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]  
留下data那一行，结尾用分号结束  
![在这里插入图片描述][20190902112413501.png]

#### 5.在App.vue文件的style中引入 ####

/* icon.css - 自定义图标库 */
    	@import './common/icon.css';

#### 6.在页面中使用 ####

找到之前解压的文件，里面有一个demo的html文件，在浏览器中打开，选择font-class  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]  
在页面单击右键，检查  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]  
复制class中的内容，用到我们需要引入该图标的页面中，如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 6]  
运行即可显示。

[Iconfont]: https://www.iconfont.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b48209198bd140cb83fe3ff2a31f767d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b9eb3729fa6b45a79c53c82c24b65029.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/eb8023ad59ae45a7857d511880d8c996.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3d7edf27fe284289be75fe92773d2d57.png
[20190902112413501.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/49f3493608464eb3a6e9eb37125f913a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/2833ef93f46a4a51a10106b4d0de2b81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/2a978114f51c4111a68938ee2fabf10a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/57e37275cbb14468a60078b3dafff016.png