如何使用IconFont？——矢量图标

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【如何使用IconFont？——矢量图标】

 

1.背景介绍

网上的一些小图标除了可使用css精灵图制做外，还可使用如今比较热门的iconfont去制做。那么首先搞清楚一个问题，什么是iconfont？icon font顾名思义，能够理解成icon + font即 图标字体。图标字体，能够理解为是一种特殊的字体，网页中的一些小图标和特殊字符能够经过这种方法实现。简单来讲就是把图片当成文字来使用。

2.知识剖析

2.1什么是iconfont？

iconfont，字体图标。经过使用字体格式的矢量图标来代替以往的图片格式的小图标。字体是矢量化图形，它天生具备「分辨率无关」的特性，在任何分辨率下面，均可以作到完美缩放和扩大，不会像传统图片同样，增大到必定程度就会出现明显的锯齿或者变得模糊，影响展现效果。

 

 

2.2 如何使用icon font？

提供icon font的网站有不少，例如阿里巴巴矢量图标库、fontello、icomoon、Font-Awesome、Glyphicon Halflings、Icons八、

咱们今天主要就国内使用最多的阿里巴巴矢量图标库进行介绍。

在阿里巴巴矢量图标库中，在web端有四种主要的引用方式，分别是icon单个使用、unicode引用、font-class引用、symbol引用。

icon单个使用，单个图标用户能够自行选择下载不一样的格式使用，包括png,ai,svg。此种方式适合用在图标引用特别少，之后也不须要特别维护的场景。

好比设计师用来作demo原型。

前端临时作个活动页。

固然若是你只是为了下载图标作PPT,也是极好的。

不过若是是成体系的应用使用，建议用户把icon加入项目，而后使用下面三种推荐的方式。

 

 

unicode引用，批量引用的方法之一，在网页端最原始的应用方式。兼容性最好，支持ie6+，及全部现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等，因为是字体，因此不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

font-class引用，是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。支持ie8+，及全部现代浏览器。相比于unicode语意明确，书写更直观。能够很容易分辨这个icon是什么。使用class来定义图标，当要替换图标时，只须要修改class里面的unicode引用就能够，比较方便。多色图标仍是不支持的。

symbol引用，是一种全新的使用方式，应该说这才是将来的主流，也是平台目前推荐的用法。支持多色图标了，再也不受单色限制。支持 ie9+,及现代浏览器。浏览器渲染svg的性能通常，不如png。

3.常见问题

问题: 如何在项目中修改图标的大小和颜色？

4.解决方案

使用一个demo进行演示讲解：

demo

5.编码实战

6.扩展思考

问题: iconfont相比于各类图片格式的小图标的优势和弊端？

优势：

一、轻量性：一个图标字体比一系列的图像要小。一旦图标字体加载了，图标就会立刻渲染出来，不须要下载一个图像。能够减小HTTP请求，还能够配合HTML5离线存储作性能优化。

 

二、灵活性：图标字体能够用过font-size属性设置其任何大小，还能够加各类文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。能够在任何背景下显示。使用位图的话，必须得为每一个不一样大小和不一样效果的图像输出一个不一样文件。

三、兼容性：网页字体支持全部现代浏览器，包括IE低版本。详细兼容性能够点击这里。

 

弊端：

一、图标字体只能被渲染成单色或者CSS3的渐变色，因为此限制使得它不能普遍使用。（已经开始支持彩色图标）

二、使用版权上有限制，有好多字体是收费的。固然也有不少免费开源的精美字体图标供下载使用。

三、创做自已的字体图标很费时间，重构人员后期维护的成本偏高。

7.参考文献

参考一：分享国内外免费开源的iconfont图标字库

参考二:图标字体运用以及其优点与劣势

参考三：详解CSS中iconfont的使用

参考四：阿里巴巴矢量图标库

 

 

“咱们相信人人均可以成为一个工程师，如今开始，找个师兄，带你入门，学习的路上再也不迷茫。

这里是技能树.IT修真院：http://www.jnshu.com，初学者转行到互联网行业的汇集地。"

欢迎加IT交流群565734203与你们一块儿讨论交流