字体图标

现在主流页面上的图标都使用字体图标,这样能减少图片加载数量,提高图片质量,特别是在移动端项目中使用。

使用方法

1、登录阿里图标库
搜索到需要的图标,进行收藏

2、然后添加到项目

3、然后会跳转到个人图标库页面

4、使用在线地址(推荐测试的时候使用,上线的时候得下载到本地)

5、点击 下方新icon来袭,点击更新代码,出现一个css地址,把这个里面的代码拷贝到项目css中

6、最后就可以通过在html使用下面方式使用字体图标,跟修改字体一样修改颜色大小

<i class="iconfont icon-left"></i>

彩色字体图标使用方法

1、需要引用网站生成的js文件

//at.alicdn.com/t/font_1473319176_4914331.js

2、加入通用css代码(引入一次就行)

<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

3、挑选相应图标并获取类名,应用于页面

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>