HTML之Unicode引用方式添加矢量图标(如阿里巴巴矢量图库)

目录

一、阿里巴巴矢量图库下载

1.进入官网选择图库

2.下载项目中图标至本地

 二、Unicode引用

1.特点

         2.引用(此处使用阿里巴巴矢量图库)


一、阿里巴巴矢量图库下载

 

1.进入官网选择图库

阿里巴巴矢量图标库里有大量图库,简洁优美,挑选你需要的图标

(1)新建一个项目

(2) 选择需要的图标,加入购物车

 (3)将购物车图标加入至项目中

2.下载项目中图标至本地

(1)文件名带demo的都是都是一些实例,里面也是讲使用方法。针对unicode引用方式我们主要是用到iconfont.css和后缀名为.eot.svg.ttf.woff的文件

(2)将其加入至我们的项目文件中

(3)修改iconfont.css引用其他文件路径 

 二、Unicode引用

1.特点

unicode是字体在网页端最原始的应用方式,特点是:

(1)兼容性最好,支持ie6+,及所有现代浏览器。

(2)支持按字体的方式去动态调整图标大小,颜色等等。

(3)但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式

2.引用(此处使用阿里巴巴矢量图库)

    <i class="iconfont">&#xeb9d;</i>

 

猜你喜欢

转载自blog.csdn.net/mmake1994/article/details/88378208