阿里巴巴字体图标的使用

iconfont-阿里巴巴矢量图标库

找到需要的图标，点击购物车

选好后，点击右上角的购物车

选择“添加至项目”

 

 没有项目的话需要新建项目

 点击右上角的+可新建项目

在这里我新建了一个test的项目，项目里面包含了我刚刚选择的图标

 选中Unicode，这里好像选哪个都无所谓，然后点击下载至本地，就会下载一个压缩包

 将压缩包解压，打开文件会发现有下列文件

 由于阿里巴巴更新了，淘汰掉了svg等（具体原因不详细讲啦，因为我也记不清了）

在这里我们新建一个文件夹，fonts，这个名字可以随意命名，然后将以下这几个文件拉入fonts中

再将fonts放到html文件的根目录下

相当于你的html在哪就放哪里

 打开html文件，接下来就是引入图标啦

1.在html文件中链接iconfont.css文件，如下图

 要注意路径问题

2.写入一个span标签，再写入公共类名，公共类名在iconfont.css中可以看到

即

将这个类名在html文件中写入

 

 最后引入图标有两种方法

①通过iconfont.css文件中的图标类名引入，红色圈圈圈住的就是我加入购物车中的三个图标的类名，在这里我们选中第一个，复制紫色横线上的内容，即icon-jinzita,到html文件中

 

 

复制好后是这样的 ，保存打开网页后

 显示成功，颜色问题后续再说

②点开刚刚我们下载的压缩包中的demo_index

 

 点开后是这样，复制

放入html文件中，注意此时类名是只需要公共类就行了

创建成功