Uni-App在小程序引入iconfont图标(超详细带图篇)

今天药忘吃喽~ 2023-02-24 11:27 10阅读 0赞

**                                                      Uni-App在小程序引入iconfont图标(超详细带图篇)**

**此篇适合小白入门，大神请略过。描述有误还请指出。最近网上简书看了几篇文章，说的都不够详细，新手上去看了也是一脸懵逼。自己今天正好也用上，特此记录一下。**

**1.打开阿里巴巴矢量图标库，选中相对应的图标，加入项目后会出现如下图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4_size_16_color_FFFFFF_t_70][]

2，新建一个css文件，把上面生成的代码复制进去，这里建议就在（static下）

3.选择这行在浏览器打开

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4_size_16_color_FFFFFF_t_70 1][]

4，在浏览器复制得到的图标样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4_size_16_color_FFFFFF_t_70 2][]

5，在页面写入图标标签，引入对应的小图标

![20200709143205470.png][]

6在app.vue里面引入之前的css，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4_size_16_color_FFFFFF_t_70 3][]

7，刷新页面，图标就出来啦

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4_size_16_color_FFFFFF_t_70]: /images/20230209/56262ade6701461fa24174ab12ed147b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200709142930750.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200709143047804.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4,size_16,color_FFFFFF,t_70
[20200709143205470.png]: https://img-blog.csdnimg.cn/20200709143205470.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200709143318908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200709143448301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTAyMDI4,size_16,color_FFFFFF,t_70