阿里巴巴iconfont的几种使用方法介绍

官方链接：https://www.iconfont.cn/ 本人今天花了一些时间看这玩意，简要在这里说一下三种使用方法

下载

如果你并不是想用 字体图标 ，那么你可以找到你喜欢的图标直接下载 图片格式。SVG是基于XML的矢量图像格式，所以你会看到SVG的选项是 复制SVG 而不是 下载SVG。

我们重点还是说如何使用 字体图标，只有这样我们才可以给他赋color、font-size等属性。

1. 要想使用字体图标，首先将选中的图标添加入库：
   

2. 然后推荐将你喜欢的字体 添加至项目(添加至项目的好处是可以在云端管理我们的图标，并且是以项目的方式，可以添加团队成员共享这个项目的图标库，不得不说阿里考虑的还是很周到啊；还有一个好处是官方会为你的图标们生成在线版的引用文件，这样简直不要太方便。当然你也可以在添加入库后直接点击下载，但是这样就没有这两个好处咯)
   

3. 然后到我的项目中查看图标。解释一下：Unicode、Font class、Symbol 是三种不同的字体图标使用方案；在线链接和下载至本地对应的是两种不同的文件引入方式。下面直接开始讲如何使用，看完你就会知道了。
   

4. 为了更好地了解原理，我们先选择 下载至本地 ，本地是一个静态资源压缩包

   • demo_index.html是教程，解释了三种图标方案的区别和使用方法。
   • demo.css是demo_index.html的样式文件
   • 其余的文件就是这三种使用方案所需要的文件
     

5. 打开demo.html，可以看到使用步骤，第一步都是做了一个引入，这里的url其实就可以替换为刚才官网的那个在线链接
   

---

三种使用方案介绍(推荐第二/三种)

这里用的工具是HbuilderX，环境是uni-app(和vue没太大区别)

方案一 Unicode

这是最基本的方案，font-class就是对Unicode方案的封装

1. 引入

• 这里可以只引入ttf、woff、woff2等任一格式的文件(做测试不想写太多代码，几种格式是为了兼容不同浏览器，关于格式可以参考此链接，解释几种字体图标的格式)，~@代表根路径(vue里的语法)
  
  • 关于几种格式是如何做到不同浏览器兼容的，可以看此链接：
    

2. 调用

• 直接当做文字来使用，转义字符在官网或者demo.html文件里查看
  
  

---

方案二 font-class

这种方案，需要引入iconfont.css，打开iconfont.css文件可以看到下图，这就是封装了Unicode的使用步骤。其依赖了Unicode方案的所有文件，使用时只需要添加class属性即可，这种方案最简单操作，力荐

• 用法超简单

  <!--App.vue中引入样式文件，用线上链接即可-->
  <style>
  	@import "xxxxxxx/iconfont.css";
  </style>
  
  <!--class方式引用-->
  <div class="iconfont icon-qianbao"></div>
  

方案三 Symbol

• 这种方案是官方最推荐的一种啦，也是未来的主流，支持颜色。文章看到这想必兄弟们也应该能自己使用啦，因为博主要下班啦，所以这里就不示范啦。(实在不明白的话可以进群畅聊哦)
  

---

😁欢迎加入QQ群交流： [游戏-Web-开发技术栈 ☄️] '300567032’
点击下方图标一键加入！

---