iconfont 引入流程

uniapp iconfont 两种引入流程

一: 本地引入

1.将需要的图标加入到购物车,添加至项目

2.下载到本地并解压

3.解压文件夹后只保留里面的iconfont.css 和 iconfont.ttf

4.修改 iconfont.css 文件

补充: 在uni-app项目中在 App.vue 引入会报找不到 iconfont.ttf 文件的错误,

解决: 修改 iconfont.ttf 的引入方式

5.main.js全局引入 iconfont.css 文件

**ps:**我在global.css里面引入了iconfont.css,所以main.js里面直接引入的global.css

6.使用方法,可以自定义图标颜色

<i class="iconfont iconsearch" style="color: red"></i> 

7.后期如果增加字体图标,可以按照上述方法进行替换iconfont.css和iconfont.ttf两个文件, iconfont.css 还是按照第4步进行修改即可

二:链接引入

1.只需要保留下载的 iconfont.css 文件

2.修改 iconfont.css 文件

注意点: 使用链接引入在没有网络的情况下是不显示图标的,本地引入不会出现这种现象