简简单单三两步，让你学会在uniapp中引入并使用iconfon图标

uniapp中使用网络字体图标（iconfont）

我发现越来越多的人抛弃了像Font Awesome这样的图标库，原来可能是图标过于单调和缺少社区活跃度带来的很多优秀的字体图标创作者，当然上面也可能是我 个人的错觉。

画不多哔哔，直接开始正题。

前言：

uniapp中不支持Symbol多色字体，所以我们以下介绍的为Unicode，和Font class在uniapp中的本地引入用法和网络css引入方法

Unicode和font class本地资源引入方法：

第一步：

第二步：
在static目录下新建文件夹iconfont,并将刚才下载的文件中的以下内容复制到iconfont的文件夹内

第三步：
并修改iconfont.css文件中的引入路径，在改样式中修改@font-face中的路径，比如在所有url里面的iconfont的前面添加路径~@/static/iconfont/ ，如下图显示：

第四步：
在app.vue - style中全局引用iconfont.css

@import ‘文件路径名’

然后在使用时，在类名上需要添加iconfont，和图标对应的类名，就可以使用了。
上面这类方法不仅是Unicode本地资源引入方法也可以说是font class的本地资源引入方法，因为下载资源自带类名，
如果不想要font class的模式，可以把资源中类名删除，就是Unicode模式了，在标签内添加字体图标对应代码，就可以使用

---

Unicode网络资源引入方法

第一步：
复制图中位置代码

第二步：
建议大家在uniapp的根目录下新建common文件夹，并在common下新建iconfont.css文件，之后将刚才copy的代码粘贴到iconfont.css文件中。
第三步：
由于copy的代码是没有https标头的，即使h5端可以显示，但是由于微信小程序的特殊规定，不加https:是无法使用的。所以要在font-face路径中添加：https:,如图

第四步：
定义iconfont类名，以使用字体，如图中

第五步：
在app.vue - style中全局引用iconfont.css;
@import ‘文件路径名’
以上就是Unicode网络资源的引入方法；

---

font class网络资源引入方法

第一步：
打开图中链接

第二步：
复制链接中的代码

（我是莫得感情的复制机器）

第三步：
复制到创建好的iconfont.css文件中。

第四步：
在app.vue - style中全局引入iconfont.css
@import ‘文件路径名’

---

Unicode和font class类型的各自使用方式

Unicode字体图标使用方式：

在标签类名上添加对应字体类型为iconfont的类名，并在标签内部添加对应的代码，如图：

font class字体图标使用方式：

相信这种方法大家是再熟悉不过的了，
在标签类名上添加对应字体类型为iconfont的类名，并添加对应字体的类名就ok,如图：

---

最后温馨提醒：

如果要使用的字体资源大于40kb,那么需要自己转为base64格式，在这里推荐给大家一个转base64格式的网站：
https://www.giftofspeed.com/base64-encoder/

---

//以上就是本篇：在uniapp中引入并使用iconfon图标的内容，希望能够帮助到大家