阿里图标iconfont的多种使用方式，对开发者来说是非常的友好

序言：并不是每个程序员都会PS，但会PS的程序员无疑是nb的，自从有了阿里图标库之后，我再也不用找UI设计图标了，这感觉简直爽到爆，赶紧点赞收藏吧。

阿里图标官 址：https://www.iconfont.cn/

使用方法：

第一种：在搜索框中输入关键字，选择合适的图标，然后自定义颜色、尺寸，点击下载就可以了，是不是很方便。

第二种：图标可以收藏，可以加入项目库，这里具体讲解一下项目库中的图标如何引用

在我的项目中找到对应的项目，然后可以下载至本地，或者如果引用线上链接会更方便

Unicode 引用

第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：

第二步：拷贝项目下面生成的@font-face

第三步：定义使用 iconfont 的样式

第四步：挑选相应图标并获取字体编码，应用于页面

Font class 引用

第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：

第二步：引入项目下面生成的 fontclass 代码：

第三步：挑选相应图标并获取类名，应用于页面：

Symbol 引用

第一步：引入项目下面生成的 symbol 代码：

第二步：加入通用 CSS 代码（引入一次就行）：

第三步：挑选相应图标并获取类名，应用于页面：

以上就是页面中引用iconfont图标的几种方法，感兴趣的朋友可以动手尝试一下。

我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。

往期文章分享：

微信小程序授权获取手机 ，跟着我来学习下是如何实现的吧

小程序wx.chooseImage上传图片，支持相册选择图片或使用相机拍照