2018年最完整5大网页设计图标解决方案：Font Awesome奥森图Unicode、CSS 和、Font以及国产zfont图标集

网上有很多高质量的图标，基于icon的关键词能在Google上搜索到不少内容，不考虑版权外还要修改大小、颜色等等，现在介绍一些替代方案：Unicode、CSS 和 Font，它具有更高的灵活性。

方案一：Font Awesome奥森图标

一套绝佳的图标字体库和CSS框架（奥森图标），可以通过http://code.z01.com/Boot/font.html 获取，共675个图标，可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

使用Font Awesome图标最大的好处是兼容性高，ie8下完整浏览不是问题。

方案二：Unicode（维基百科）

维基百科中：

Unicode（中文：万国码、国际码、统一码、单一码）是计算机科学领域里的一项业界标准。它对世界上大部分的文字系统进行了整理、编码，使得电脑可以用更为简单的方式来呈现和处理文字。

Unicode以16进制表示，例如一些图标可以表示为（一些平台会自动转换成emoji，如iOS）：

相比Unicode，好处在于更小的体积，以及能够快速更改颜色等。
更多请至：http://jrgraphix.net/r/Unicode/2600-26FF

方案三：CSS

上图中内容均为css实现，可能你觉得这些很简单，甚至有些粗糙，但他在当今HTML5+CSS3的配合下能完成不少有意思的互动，由于设备迭代速度很快，近年来也再也没有IE6的迷之Bug的困扰了。

更多请至：http://cssicon.space/#/

方案四：Font字体

用图标字体来代替图标是当下最流行且优雅的解决方案，它能如普通字体一样指定各种属性，主要有两种字体：Awesome和Material icons，这两者均为Web字体，需要在CSS中使用@font-face加载，二者的用法上都差不多，一下以Google的font Material icons 来示例。

Web字体的加载

Google这个 Material icons 字体有个对应的API，很方便

复制<link href="https://fonts.googleapis.com/icon?family=Material+Icons"

      rel="stylesheet">

但是由于你懂的原因不太好用，字体也可下载到本地加载：

复制@font-face {

  font-family: 'Material Icons';

  font-style: normal;

  font-weight: 400;

  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */

  src: local('Material Icons'),       local('MaterialIcons-Regular'),       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');}

可以为字体指定初始样式（非必要）：

复制.material-icons {

  font-family: 'Material Icons';

  font-weight: normal;

  font-style: normal;

  font-size: 24px;  /* Preferred icon size */

  display: inline-block;

  line-height: 1;

  text-transform: none;

  letter-spacing: normal;

  word-wrap: normal;

  white-space: nowrap;

  direction: ltr;

  /* Support for all WebKit browsers. */

  -webkit-font-smoothing: antialiased;

  /* Support for Safari and Chrome. */

  text-rendering: optimizeLegibility;

  /* Support for Firefox. */

  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */

  font-feature-settings: 'liga';}

如果有了上面的字体样式初始化，就可以直接使用material-icons类来调用图标:

复制<i class="material-icons">face</i>

也可以直接指定内容 font-family: 'Material Icons'来调用，例如：

复制#main .reply a:before {

    font-family: 'Material Icons';

    content: "reply";

    padding-right: .3em;

    display: inline-block;

    vertical-align: text-bottom;

    font-size: 1.25em;}

更多请至:Awesome Material icons

方案五：zFont图标集

这是由业界领先的Zoomla!逐浪CMS团队黄页的图标，目前共214个，解决了诸如svg矢量不兼容的问题，并与asesome奥森图标完整兼容，并在http://code.z01.com 平台进行全面开放。

另外一个好处就是速度快，比国外cdn访问支持更好，同步支持http://和https://（就是兼容SSL访问引用啦：）

使用此图集方法有二：一是基于在http://code.z01.com 平台直接获取，简而言之就是调用：

@import url("https://code.z01.com/Zfont.css");

通过引用上面一行，可以直接调用“逐浪云”高端webfont字体库，或访问www.ziti163.com/webfont获取自定义字体。

方法二是下载免费强大能够建设网站、OA、电商和移动平台的Zoomla!逐浪CMS，内部会直接集成，如下图标：