在网站中使用字体图标的方法

为什么要用字体图标？
字体图标最大的好处，在于它不会变形和加载速度快。图标字体可以轻松更改大小，颜色，形状。 图标字体是透明的，你可以将它们放在任何颜色或类型的背景上，还可以添加笔触或更改图标的不透明度。图标字体是矢量图像，这意味着它们是可随意进行缩放而不失真的。 与字体一样，你可以根据需要将它们设置大小。
 
如何使用字体图标？
 
一.下载字体图标
推荐两个下载图标字体的网址：
 
阿里矢量图标官网：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 使用步骤如下：

1. 打开下载好的压缩包，把里面的所有文件都复制到你的网页同目录文件夹下。

也可以打开demo_index.html，按照代码url()框内的文件名，复制只用到的文件（不同的图标生成的文件名和数量都不一样），列如里面的iconfont.ttf、iconfont.woff、iconfont.woff2文件复制放到你的网页同目录下。
  

2. 在刚才打开的demo_index.html网页里Unicode目录下面拷贝代码复制到你的网页的css样式里

 

3. 在刚才那个网页或者官网上获取字体编码用<span>或<i>标签应用在页面上

 
 
 
可以在类名.iconfont统一设置css样式，也可以给它一个id单独设置css样式
 
Font class引入使用步骤

1. 和Unicode一样先从压缩包里拷贝需要的文件，然后多拷贝一个iconfont.css样式
2. 在你的网页里用外联引用iconfont.css样式

 
3.和Unicode一样，不过可以不用字体编码，直接在联入的css查看类名，用类名使用
<span class="iconfont icon-xxx"></span>
 
 
 
 
SVG Symbol引入使用步骤：

1. 只用在压缩包里拷贝iconfont.js文件到你的网页文件夹就行了
2. 在网页里联入iconfont.js文件和设置图标统一样式，你可以直接用压缩包里demo_index.html 页面里SVG Symbol目录的样式

 
3.选图标并获取类名，应用于页面