【转】uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客
2021/7/31 6:06:13
本文主要是介绍【转】uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
【转】原文连接:(10条消息) uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客
-
进入https://www.iconfont.cn/官网
-
将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中
-
打开目标项目,下载代码至本地
-
将下载的文件进行解压,命名为iconfont
-
Window+R打开控制面版,输入cmd—点击enter键
-
切换到iconfont文件夹
-
输入命令行:
npm install -g iconfont-tools
----点击enter键 -
输入命令行:
iconfont-tools
----点击enter键 -
出现如图所示的内容,按图示输入文件名即可
-
打开iconfont文件夹即可看到生成的目标文件 iconfont-weapp
-
打开iconfont-weap文件夹
-
将 iconfont-weapp-icon.css (默认生成的文件名字)放入uniapp项目的static文件夹下
-
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
-
最终效果如图所示:
-
修改图标的大小(通过设置width和height来修改)
.t-icon { width: 30px; height: 30px; }
- 1
- 2
- 3
- 4
这篇关于【转】uniapp引入iconfont彩色图标_gyueh的博客-CSDN博客的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-07fastcgi 是什么-icode9专业技术文章分享
- 2024-10-07fastcgi 的详细使用教程介绍-icode9专业技术文章分享
- 2024-10-07git如何更新单个文件到本地-icode9专业技术文章分享
- 2024-10-07如何使用ASM(Abstract Syntax Tree Manipulation)技术来修改第三方AAR依赖中的函数-icode9专业技术文章分享
- 2024-10-07Activity 跳转时间耗时很长怎么优化解决-icode9专业技术文章分享
- 2024-10-07Androud Toast 有哪些常用的第三方组件-icode9专业技术文章分享
- 2024-10-07在viewmodel中怎么使用 mmkv?-icode9专业技术文章分享
- 2024-10-07MMKV.defaultMMKV() 是单例模式吗?-icode9专业技术文章分享
- 2024-10-04el-table 开启定时器下,表格的选中状态会消失是什么原因-icode9专业技术文章分享
- 2024-10-03如何安装和初始化飞牛私有云 fnOS?-icode9专业技术文章分享