在网站中使用字体图标的方法
为什么要用字体图标？
字体图标最大的好处，在于它不会变形和加载速度快。图标字体可以轻松更改大小，颜色，形状。 图标字体是透明的，你可以将它们放在任何颜色或类型的背景上，还可以添加笔触或更改图标的不透明度。图标字体是矢量图像，这意味着它们是可随意进行缩放而不失真的。 与字体一样，你可以根据需要将它们设置大小。
如何使用字体图标？
一.下载字体图标
推荐两个下载图标字体的网址：
阿里矢量图标官网：www.iconfont.cn
icomoon官网：http://icomoon.io
以阿里的图标使用为例
先找到你想要的图标，然后点击添加入库，到你的购物车里，你可以将选中的图标添加到项目中（没有的话，新建一个），然后在我的项目里下载至本地。
Unicode 引用
Unicode 是字体在网页端最原始的应用方式，在默认情况下是不支持多色的，如果直接添加多色图标会自动去色。
Font class引入
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode应用 书写不直观，语意不明确的问题。
具有如下特点：
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
SVG Symbol引入
是官网平台目前推荐的用法，是一种全新的使用方式，是未来的主流。
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染性能一般，不如 png。
Unicode 使用步骤如下：
可以在类名.iconfont统一设置css样式，也可以给它一个id单独设置css样式
Font class引入使用步骤
3.和Unicode一样，不过可以不用字体编码，直接在联入的css查看类名，用类名使用
SVG Symbol引入使用步骤：
3.选图标并获取类名，应用于页面
字体图标最大的好处，在于它不会变形和加载速度快。图标字体可以轻松更改大小，颜色，形状。 图标字体是透明的，你可以将它们放在任何颜色或类型的背景上，还可以添加笔触或更改图标的不透明度。图标字体是矢量图像，这意味着它们是可随意进行缩放而不失真的。 与字体一样，你可以根据需要将它们设置大小。
如何使用字体图标？
一.下载字体图标
推荐两个下载图标字体的网址：
阿里矢量图标官网：www.iconfont.cn
icomoon官网：http://icomoon.io
以阿里的图标使用为例
先找到你想要的图标，然后点击添加入库，到你的购物车里，你可以将选中的图标添加到项目中（没有的话，新建一个），然后在我的项目里下载至本地。
二、引入
字体的引入有三种方式：Unicode、Font class 及 SVG Symbol。Unicode 引用
Unicode 是字体在网页端最原始的应用方式，在默认情况下是不支持多色的，如果直接添加多色图标会自动去色。
Font class引入
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode应用 书写不直观，语意不明确的问题。
具有如下特点：
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
SVG Symbol引入
是官网平台目前推荐的用法，是一种全新的使用方式，是未来的主流。
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
支持多色图标了，不再受单色限制。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染性能一般，不如 png。
Unicode 使用步骤如下：
- 打开下载好的压缩包，把里面的所有文件都复制到你的网页同目录文件夹下。
- 在刚才打开的demo_index.html网页里Unicode目录下面拷贝代码复制到你的网页的css样式里
- 在刚才那个网页或者官网上获取字体编码用或标签应用在页面上
可以在类名.iconfont统一设置css样式，也可以给它一个id单独设置css样式
Font class引入使用步骤
- 和Unicode一样先从压缩包里拷贝需要的文件，然后多拷贝一个iconfont.css样式
- 在你的网页里用外联引用iconfont.css样式
3.和Unicode一样，不过可以不用字体编码，直接在联入的css查看类名，用类名使用
SVG Symbol引入使用步骤：
- 只用在压缩包里拷贝iconfont.js文件到你的网页文件夹就行了
- 在网页里联入iconfont.js文件和设置图标统一样式，你可以直接用压缩包里demo_index.html 页面里SVG Symbol目录的样式
3.选图标并获取类名，应用于页面