uniapp iconfont图标使用

前言

最近在折腾一个uniapp的demo程序，需要用到iconfont图标，但是官网上面无图无真相，对初学者不友好。下面我贴图介绍一下使用过程。

正文如下

1.  选择图标

进入iconfont 阿里巴巴图标库官网： https://www.iconfont.cn/ , 登录后，选择需要的图标，点击购物车

2.  下载代码

选择完成后，点击顶部购物车图标，并点击下载代码

3.  解压下载文件

解压下载文件, 打开demo_index.html,  我们在页面中可看到三种引用方式，今天我们介绍的使用unicode引入

4.  项目中使用

复制两个文件： iconfont.css iconfont.ttf 文件至你的项目目录，我的文件目录结构如下

5.  项目中使用

打开iconfont.css 文件，修改ttf文件地址

在文件中引入css代码

在页面中使用字体图标，图标名称可在iconfont.css中查看

6. 最终效果

效果如下

最后

我还是菜鸡一枚，得多练习呀，加油!