uniapp 使用iconfont

进入  iconfont-阿里巴巴矢量图标库

一、用Symbol方法

1）将需要的图标添加到购物车，添加到相应的目标项目，如下图下载

2）将下载的文件解压到项目static文件下。如下图：

3）选中font文件，点击鼠标右键选择在外部资源管理器打开

4）选中文件路径输入cmd，按Enter

1. 输入命令行：npm install -g iconfont-tools或cnpm install -g iconfont-tools----点击enter键执行

2. 输入命令行： iconfont-tools----点击enter键执行，如下图：

 5）现在新生成了iconfont-weapp文件，将里面的iconfont-weapp-icon.css文件放至static文件下，如图：

6） 将文件引入到main.js或者APP.vue

main.js中：import './static/iconfont-weapp-icon.css'

APP.vue中：@import url('/static/iconfont-weapp-icon.css');

7）最后就是使用啦！（tips:可以通过t-icon来改变大小）

<view class="t-icon t-×××"></view>

×××代表

 

二、 用Unicode 和font class的方式

1）如Symbol方式的前两部（选中Font class再下载到本地）在iconfont.css更改引入在线文件：

 2）在APP.vue中引入：@import '@/static/font/iconfont.css';

3）使用,可以通过class类名改变大小和颜色；

Unicode :<i class="iconfont">&#xe606;</i>
Font class :<i class="iconfont icon-sanmingzhi-01"></i>

  

实例：

<i class="iconfont i-size icon-sanmingzhi-01 c-057"></i>
<i class="iconfont i-size c-orange">&#xe606;</i>
<view class="t-icon i-size t-icon-sanmingzhi-01"></view>

效果图：