iconfont——字体图标的使用

一、iconfont特性

使用字体文件取代图片文件，来展示图标、特殊字体等元素的方法相比于图片，iconfont实现的图标可以通过CSS字体样式来改变图片的外观（主要是颜色，大小）。并且，iconfont实现的图标是矢量的，改变大小不会影响图标效果

二、iconfont获取

阿里巴巴iconfont库

使用iconfont时下载的文件中有下面需要的所有代码

三、iconfont使用步骤

1、注册登录阿里巴巴iconfont库，搜索需要图标

在这里插入代码片

选中购物车，添加入库

2、点击右上角购物车，将所选图片添加至项目

没有项目创建项目，直接下载素材只会下载图片

将素材下载至本地

有Unicode，Font class，Symbol三种实现方式，各有特点。unicode兼容性最好，支持ie6+。但是查看代码的时候很难通过Unicode码区分使用的是什么图标
fontclass，兼容性良好，支持ie8+。通过类名，可以很直观判断当前使用的是哪个图标
Symbol支持ie9+，并且支持多色图标，甚至可以利用CSS来实现动画
—— 综上所述，推荐使用Font class与Symbol

3、iconfont的添加

将下载的文件解压缩后移动到项目中

A：Unicode

在html文件中引入下载文件中的iconfont.css文件

创建承载iconfont的标签

注意： 一般使用i标签作为iconfont的容器

iconfont类名是必须要添加的，i标签中的text内容，是在自己的iconfont项目文件中的对应图标上复制而来

点击复制代码，将代码添加到i标签中

效果：

B：Font class

fontclass的使用方法与Unicode差不多，同样是先引入iconfont.css文件，只是fontclass中，从项目图标上复制的代码需要添加到容器的类中

注意：iconfont类名是必须添加的 ；这次复制代码复制下来的其实就是类名

C：Symbol

这是通过svg来实现的，需要先引入iconfont.js文件，并且添加通用样式

html结构：

注意：
svg标签中的icon类名必须添加；

use标签中的icon-search是从iconfont项目中对应图标处复制的代码

实现效果：

可以实现彩色图标
注意：只有Symbol可以实现彩色图标

建议：除了需要使用彩色图标的地方，使用fontclass的方式添加iconfont更方便一些