uni-app项目引入图标

小鱼儿 2022-10-24 13:22 210阅读 0赞

## uni-app项目引入图标 ##

## 普通图标引入 ##

1、[阿里巴巴矢量图官网][Link 1]创建图标项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 1]  
2、将搜索的图标添加进购物车，在购物车里面将图标添加进项目里面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 3]  
3、下载该文件到本地，将该文件的css文件复制到项目里面 （并设置大小）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 5]  
4、修改iconfont.css文件的引入文件，只留下data路径，并用分号结尾  
![在这里插入图片描述][20210129185627382.png]  
5、项目页面使用icon

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

## 彩色图标引入 ##

1、同样创建彩色图标项目，在阿里巴巴矢量图库将彩色图标添加进所需的项目中，将该文件下载到本地  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 7]  
2、通过cmd【window+R，输入cmd】进入下载的iconfont文件内（注：我下载的文件已被我重命名为iconfont）  
1）进入下载文件的位置（我的在d盘）`d:`  
2）进入文件图标文件`cd 文件地址`

3、通过命令行下载iconfont-tools来生成彩色图标库小程序专用文件即可引入使用  
1）全局安装：`npm install -g iconfont-tools`  
2）文件生成tools：`iconfont-tools`  
3）按着提示完成输入（每次输入直接回车）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 8]  
4、完成后iconfont文件夹即生成的目标文件 iconfont-weapp ，将该文件的iconfont-weapp-icon.css 文件放入项目中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 9]  
5、将iconfont-weapp-icon.css文件的大小重新设置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 10]  
6、项目中引入该文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 11]  
7、项目使用

提示：若有错的地方希望各位能够指出来，我及时更正。若有不明白的也可以与我沟通。谢谢支持。

[Link 1]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70]: /images/20221024/8c9dfda9d8934cb99fb4ed0c5453ef0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 1]: /images/20221024/bbdf7dbf755d412196e2b83e2e2adfd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 2]: /images/20221024/e227a44c4a8b4ca193e809dc4441fe17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 3]: /images/20221024/45ce508453ed4d4f93fc32299c63c38f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 4]: /images/20221024/0b1b05f2bf694edaa699af6d41c00143.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 5]: /images/20221024/732174e9d1644ca388c2cde84891cfc1.png
[20210129185627382.png]: /images/20221024/62511f28b6a6451a815f6262ac13fac7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 6]: /images/20221024/65d340f4546d4e67ab5034bcd16ab011.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 7]: /images/20221024/0fbf416721ef4289bdbc833f786e4e6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 8]: /images/20221024/bf6f3fc48f50463db1a70a6de375d855.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 9]: /images/20221024/e62b49812a16446693b0817ed35ecb58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 10]: /images/20221024/57e9f34d83414b6cb25103214210c52a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 11]: /images/20221024/199f4af4dc5248c29a3ed6baf26be387.png