-
进入https://www.iconfont.cn/官网
-
将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中
-
打开目标项目,下载代码至本地
-
将下载的文件进行解压,命名为iconfont,如图:
-
Window+R打开控制面版,输入cmd—点击enter键
-
切换到iconfont文件夹
-
输入命令行:
npm install -g iconfont-tools
或cnpm install -g iconfont-tools
----点击enter键执行 -
输入命令行:
iconfont-tools
----点击enter键执行 -
出现如图所示的内容,按图示输入文件名即可
-
打开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>
-
最终效果如图所示:
-
修改图标的大小(通过设置width和height来修改)
.t-icon {
width: 30px;
height: 30px;
}