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

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

 

 

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

  2. 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中
    【转】uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客

  3. 打开目标项目,下载代码至本地
    【转】uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客

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

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

  6. 切换到iconfont文件夹

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

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

  9. 出现如图所示的内容,按图示输入文件名即可
    【转】uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客

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

  11. 打开iconfont-weap文件夹

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

  13. iconfont图标的引入
    引入方式一:main.js中引入iconfont图标文件
    【转】uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客

引入方式二:App.vue文件中引入iconfont图标
【转】uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客
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
  1. 最终效果如图所示:
    【转】uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客

  2. 修改图标的大小(通过设置width和height来修改)

.t-icon {
    width: 30px; 
    height: 30px;
}
 
  • 1
  • 2
  • 3
  • 4
 

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

上一篇:React+Umijs+AntDesign+Axios技术栈项目搭建


下一篇:信号之信号概念