阿里矢量图引入的具体方法,详解!

很多刚入门的小白写站的时候都会碰到一个问题,不知道怎么引入矢量图,今天拿阿里矢量图来给大家简单分享一下具体的方法。

首先,去官网找到你所需要的的图标,拿购物来举例阿里矢量图引入的具体方法,详解!,如图,将鼠标放到上面会有三个选项,点击加入购物车,

阿里矢量图引入的具体方法,详解!

点击“下载代码”,保存到你已经新建好的文件夹,

阿里矢量图引入的具体方法,详解!

(为了方便识别,重命名了一下),下一步是解压文件,咱们可以选择直接将解压到的地址选择为 你所要写的站的css文件中,也可以直接解压,解压后,会有如下几个文件

阿里矢量图引入的具体方法,详解!

其中的iconfont.css就是需要在头部引入的css文件,如果你上一步选择的直接解压文件,,那么你需要将iconfont.css文件复制,并且粘贴到目标文件中的css文件夹下,

阿里矢量图引入的具体方法,详解!

如图,这就引入好了,打开你的html文件,将这个css引入,

阿里矢量图引入的具体方法,详解!

接下来咱们需要获取到这个图标的Unicode编码,这个编码去哪找呢,回到你解压的那个文件中,有一个

阿里矢量图引入的具体方法,详解!

带有Unicode的文件,打开之后,

阿里矢量图引入的具体方法,详解!

复制图标下面的Unicode编码,返回html文件,直接调用

阿里矢量图引入的具体方法,详解!

保存并运行阿里矢量图引入的具体方法,详解! 完成icon引入。

 

如果有些的不好的地方,也还请大家多多指正,共同进步。