使用阿里矢量图标的三种方法

将你要使用的icon图标下载到本地

 

fontclass方式引用: 引入下载文件中的css文件与js文件

使用阿里矢量图标的三种方法_第1张图片

 

第二张方式symbol方式引用:

使用阿里矢量图标的三种方法_第2张图片

引用第一步

使用阿里矢量图标的三种方法_第3张图片

引用完成


 

 

第三张方法

 

三、unicode引用

使用阿里矢量图标的三种方法_第4张图片

第一步,注意修改路径

使用阿里矢量图标的三种方法_第5张图片

定义字体

使用阿里矢量图标的三种方法_第6张图片

在html中引用

几种应用方法的比较:

第三种复杂,但是兼容ie6;

第二种快捷,简单。但是兼容性较差,支持 ie9+,及现代浏览器。浏览器渲染svg的性能一般,还不如png。

第一种适中,介于2者之间,

至于选择哪种方式,根据你的需求来做适当的选择。


 

 

 

 

你可能感兴趣的:(阿里矢量图标使用方法,阿里矢量图标,icon)