【转】uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客

 【转】原文连接：(10条消息) uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客

 

 

1. 进入https://www.iconfont.cn/官网

2. 将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中
   

   

3. 打开目标项目，下载代码至本地
   

   

4. 将下载的文件进行解压，命名为iconfont

5. Window+R打开控制面版，输入cmd—点击enter键

6. 切换到iconfont文件夹

7. 输入命令行：npm install -g iconfont-tools----点击enter键

8. 输入命令行： iconfont-tools----点击enter键

9. 出现如图所示的内容，按图示输入文件名即可
   

   

10. 打开iconfont文件夹即可看到生成的目标文件 iconfont-weapp

11. 打开iconfont-weap文件夹

12. 将 iconfont-weapp-icon.css （默认生成的文件名字）放入uniapp项目的static文件夹下

13. iconfont图标的引入
    引入方式一：main.js中引入iconfont图标文件
    

    

引入方式二：App.vue文件中引入iconfont图标

14. 使用实例

<view class="t-icon t-icon-图标名"></view>
//eg:
<view class="t-icon t-icon-wechat"></view>
<view class="t-icon t-icon-shanghaiyinhang"></view>

 

• 1
• 2
• 3
• 4

15. 最终效果如图所示：
    

    

16. 修改图标的大小（通过设置width和height来修改）

.t-icon {
    width: 30px; 
    height: 30px;
}

 

• 1
• 2
• 3
• 4