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

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

方案一：Font Awesome奥森图标

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

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

方案二：Unicode（维基百科）

维基百科中：

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

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

注：由于SVG在头条内内容编辑器中不支持显示，故用jpg图片代替

2600

2601

2602

2603

2604

★2605

☆2606

☇2607

☈2608

☉2609

☊260a

☋260b

☌260c

☍260d

260e

☏260f

☐2610

2611

☒2612

☓2613

2614

2615

☖2616

☗2617

2618

☙2619

☚261a

☛261b

☜261c

261d

☞261e

☟261f

相比Unicode，好处在于更小的体积，以及能够快速更改颜色等。

更多请至：

方案三：CSS

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

更多请至：

方案四：Font字体

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

Web字体的加载

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

复制<link href="" rel="stylesheet">

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

复制@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url() format('woff2'), url() format('woff'), url() 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奥森图标完整兼容，并在 平台进行全面开放。

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

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

@import url("");通过引用上面一行，可以直接调用“逐浪云”高端webfont字体库，或访问获取自定义字体。

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

体验SVG预览可访问：