Web Icon 123 - 网页内图标的调用

文章渲染图

之前 保罗 在使用 php 写他的第一个个人主页的时候，在他的群里提到了 Font-Awesome 这个项目。当时还是纯小白一个，啥也听不懂。直到后来，看了几篇科普的文章，在2018年1月4日第一次在本地环境调用 Font-Awesome 。

Font-Awesome 是一个歪果仁做的项目，直到 4.7.0 为止都是完全免费并且开源，5.0版本开始引入商业化模式，并且闭源；所以目前大部分个人开发者使用的都是 4.7.0 版本。同时 4.7.0 版本还有着非常完善的CDN（内容分发网络）公用库支持，比如国内的 BootCDN ，国外的 cdnjs ，还有全球通用的 jsDelivr 。个人开发者（甚至企业）可以借助CDN快速在自己的服务上部署 Font-Awesome，降低服务器负载并节约流量。

Font-Awesome 的调用方式十分方便。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
<i class="fa fa-youtube"></i>

但是因为Font-Awesome是歪果仁做的项目，虽然也有部分中国本地化的图标（比方说微信、微博），但是还是不全。比如不含有 网易云音乐、Bilibili 等网站的图标。同时所有图标只有大约 700 个，在有些时候并没有太好的选择；也有的时候会造成重复的问题，降低访客的体验。

Iconfont+ 是阿里云在2016年创立的平台；刚开始只是为了内部使用，后期对公众开放。

设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

值得一提的是，Iconfont 上面所有的图标都可以通过 阿里云的CDN alicdn.com 免费调用；并且可以将多个图标添加至一个项目内，通过代码让所有选择的图标可以在网页里自由调用。

Iconfont的图标由众多知名或不知名的设计师设计，并且开放给公众免费下载、调用；图标数量何止千千万万。而因为设计师都会是中国人，自然也少不了中国本地化的图标。

根据官方的教程，这里提供一种最简单的调用方式。这里有一篇官方的说明，也可以阅读：https://see.wtf/g0xJu

首先你需要打开 iconfont.cn ，然后使用 新浪微博 或者 GitHub 登入。使用中文或者英文搜索你所需要的图标，把鼠标移到想要的图标上方，然后点击“购物车”按钮。重复此步骤选择完所有图标以后，点击右上角的购物车按钮，然后把所有图标全部添加到一个项目。然后进入项目，选择 Unicode 代码。

添加描述

复制所有代码，然后：

@font-face {
  font-family: 'iconfont';  /* project id 637591 */
  src: url('//at.alicdn.com/t/font_637591_mw1jnav6lej0pb9.eot');
  src: url('//at.alicdn.com/t/font_637591_mw1jnav6lej0pb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_637591_mw1jnav6lej0pb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_637591_mw1jnav6lej0pb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_637591_mw1jnav6lej0pb9.svg#iconfont') format('svg');
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

<i class="iconfont">&#xe658;</i>

Google Material Icons 是 Google 发布的 Material 设计标准 配套的图标。图标大多是以 基础、扁平化 作为标准，比较适合定制网站的功能性按钮。

Google Material Icons 可以通过 Google Fonts 调用。Google Fonts 的域名 fonts.googleapis.com 目前在中国解析到 Google 在 北京 或者 上海 的BGP线路，访问速度显然是不错的。

调用方法如下：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet">

<i class="material-icons">done</i>

综合来说，Font-Awesome 无疑是非常优秀的项目，并且已经被国内外开发者广泛使用。CDN支持也非常全面。但是使用的人数多了，总不免会有重复的问题。这个项目已经转向商业化，最后完全免费的版本停留在 4.7.0，可以认为不会再被更新；加上图标较少，个人不太推荐大量使用，仅仅作为图标补充即可。但是 Font-Awesome 有一个好处就是调用非常简单，引入一个css，html引用相应的 <i> 标签即可，比较适合入门开发者体验 Web Font 的魅力。

Iconfont+ 由成千上万的设计师设计，风格、质量各异。但是icon数量非常多，并且仍然在持续增加；加上 alicdn 的加持和优秀的本地化，尽管调用方式略微麻烦，但是是非常值得尝试使用的一套图标。

而 Google Material Icons 国内走BGP线路，速度非常可观。加上和 Material Design 适配的设计样式，非常适合在各种环境使用。但是唯一需要注意的是数量不算太多，而且都是偏向于功能性的图标。所以有些时候可能需要另外两种图标库的补充才可以完成一整个项目的设计。

感谢你在 腾讯云+社区 阅读我的文章。我是惶心，是 惶心 - 技术博客 的博主。

如果你喜欢我的文章，你可以在下面点一个赞，或者前往我的博客互动留言。