阿里图标转成css在项目中使用

准备

1. 登录 阿里图标官网,
2. 打开 线转换网站

开始

1. 在阿里图标库中选择自己想要的图标，鼠标经过图标的时候点击购物车的icon图标即可添加到购物车中心。
2. 选择完毕后在购物车中心点击下载代码按钮。下载后解压压缩包。
3. 新建一个css文件。名称可以自定义。此处我将此文件命名为：myicon.css
4. 在解压的压缩包中找到iconfont.css文件，并打开。（推荐使用sublimeText3 等其他能识别css格式并高亮的工具。）找到文件中从**.iconfont** 开始到末尾的css。即下图蓝色部分。
   
5. 将复制好的内容放到步骤三的myicon.css文件中。
6. 打开转换网站，按下图设置。
7. 点击下图中的Add fonts按钮，选择解压出的文件夹中的iconfont.ttf文件，并点击convert按钮。转换完成后点击Download链接下载转换后的压缩包文件。
   
8. 复制并粘贴到myicon.css文件的最前面。最前面！！！

使用图标

在html页面中引入myicon.css文件。使用css的类样式引用图标。格式：iconfont+空格+ 图标css样式
说明：格式中的iconfont为固定写法，icon font和图标css样式之间有个空格。
图标css样式在myicon.css文件中。如下图：

html中的使用如下图：