1. 选择想要的图标

打开 阿里iconfont 网站，注册账号或登录，找到想要的图标；

加入购物车。

2. 下载压缩包

打开购物车，点击添加至项目，项目名称可随意；

得到图标编码；

回到购物车，点击下载代码，或者直接在图标上找到下载按钮；


在css文件夹下新建iconfont文件夹，将压缩包解压到这里。

解压出来的文件除了有些是我们需要使用的，还有些是为了样例展示用，可以保留。

3. 在html文件中插入图标

在html文件中引入iconfont.css文件；

1
<link rel="stylesheet" href="/css/iconfont/iconfont.css">

在html标签中插入图标编码：
1
<span class="iconfont">&#xe66b;</span>

除了上述方法，还可按照解压出来的demo_index.html提示方法插入图标。
刷新页面，成功显示小图标！

4. 注意

  • iconfont共三种引用方式：Unicode，font-class，Symbol。
  • Unicode仅能在span中使用。
  • input框中要同时设置value值为Unicode以及font-class。