阿里字体图标使用方法——unicode引用

最近在仿小米商城官网，需要用到字体图标，现学现用，就已小米官网为例，如下图：

如上图标识，一个是购物车图标，另一个是搜索图标

一、获取字体图标

1. 1 百度“阿里字体图标”，点击第一个，进入阿里字体图标官网。

1.2 在搜索框分别输入“购物车”、“搜索框”，后出现大量图标

1.3 从众多“购物车”图标中挑选符合要求的图标，鼠标移到目标图标上，会显示三个按钮（添加入库、收藏、下载图标），点击“添加入库”即可。

1.4 添加成功的话，可以看到右上角购物车有提示（添加的数量）。

1.5 点击右上角购物车（如上图显示），右边相应弹出一个侧栏，

1.6 点击“下载代码”，下载至本地。

二、字体图标处理

2.1 下载完成后，将文件移入目标文件夹（如下图，我将下载的文件放入css文件夹中）

2.2 然后进行解压，解压后将解压出来的文件夹（此处是font_uec2sfc654g0t3xr）重命名（此处我命名为iconfont）

2.3 进入iconfont文件夹，我们可以看到有如下文件：

我们实际需要的文件是这么几个（其余几个是demo，告诉我们如何使用的），

2.4 点击demo_unicode.html文件，在浏览器中打开，可以看到相关使用说明。

我们将如下代码复制粘贴至styles.css中

然后根据文件放置位置修改路径（此处我的字体文件是放置在iconfont文件夹中的），再定义使用字体的样式（此处我未改动，有需要的话，可以自己手动改动）

2.5 最后，挑选相应图标并获取字体编码，应用于页面（在页面位置新增i或span标签，此处我用的是i标签）

格式为：
<i class="icon iconfont">此处填入字体编码（如&#xe505;）</i>


现在重新刷新页面，如下图

我们可以看到图标较小，现在可以设置字体图标（购物车）样式，最终结果如下：

其它参考文章：
阿里字体图标的正确打开方式
阿里字体图标库介绍及图标字体的使用方法

---

EOF