如何使用阿里巴巴矢量图标库并放入到你的网站中

• 前言
• 如何使用阿里巴巴矢量图标库
• 如何将图标放入到你的网站里面
  • 1、将图标导入到你的网站
  • 2、Unicode 引用
  • 3、font-class 引用
  • 4、symbol 引用
    

    ---

前言

博主没怎么学过前端开发，所以基本上就就是个半吊子。最近打算在自己的博客上面增加社交（打赏）功能，但是博主所使用的 git 主题仅仅只有一个是可以更改自定义图标与链接，并且其他的很多都是博主所用不上的，比如腾讯 QQ，微信公众号等等。所以博主决定自己稍微改一改，生成一个对于自己比较合适的社交小图标。这篇文章也是面向于新人的，所以很多地方写的会比较的啰嗦。
下图为默认的图标与样式。

下图为博主修改后的图标与样式（其中 GitHub 是使用的自定义）。

实际上这上面最麻烦的就是如何使用新的图标而已，其它的链接使用二维码，显示文字更改在这里就不叙述了，因为大家的用途都不一样。Git 主题为我们提供了 FontAwesome 的图标字体库（点击此处跳转到 FontAwesome 官网），但是其的图标字库有限，并不能满足博主的需要。所以博主找到了另外的一个图标库，阿里巴巴矢量图标库。

如何使用阿里巴巴矢量图标库

官网地址：http://www.iconfont.cn/
相比于 FontAwesome 图标库来说，阿里图标库允许用户自己上传自己制作的图标，同时还拥有众多的多色图标。虽然这会导致各个图标缺少统一性，但是其内容的丰富性是 FontAwesome 不能比的。（当然，FontAwesome 还是网站必备的）
在我们注册完账号之后就可以在上面搜索挑选图标了，比如这里博主搜索 PSN 的图标，搜索后会发现并没有找到我想要的图标，其实是因为默认搜索的时候是只显示”精选图标”与”单色图标”。这个选项可以在右上进行更改，修改后我们看到了 PSN 的图标，我们可以将其加入到购物车中。

之后我们可以在购物车那里选择添加至项目，若没有可以新建一个。

添加至项目后会进入到项目界面，在这里可以将你之前所有选择的图标进行打包下载，方便你在你的网站当中使用。
你也可以在这个界面修改你项目的名称、FontClass/Symbol 前缀、Font Family 名称等。
同时你可以通过点击图标上面的铅笔来对图标进行修改，比如更改其的大小或者位置等等。
之后则可以选择生成在线链接直接使用或者下载到本地导入到你的网站项目中去。需要注意的是，如果你在生成链接后修改了图标的话你则需要重新再次生成一遍。

如何将图标放入到你的网站里面

官方使用说明：点击跳转
阿里为 web 端提供了三种引用方法：Unicode 引用、font-class 引用、symbol 引用。同时你所下载到本地的压缩包中也有这三种方式的使用 demo。

1、将图标导入到你的网站

阿里提供了两种导入方法，一种是通过使用在线链接的方式导入，另外一种是直接将文件导入到本地当中。但是两种方法实际上区别并不大，只是本地导入的方式需要你将文件放到本地里面，同时要确保相对路径的正确。而在线链接则不需要考虑这些，但是加载速度会相比本地慢一些。
在线链接的方式比较适合于对图标进行调整的阶段，当我们全部调整到合适的时候则可以将其全部下载到本地并导入到我们的网站中，这样可以加快图标的加载速度。
同时根据引用的方法不同，导入的文件与内容也会有所区别。这里博主会结合自己的网站讲解本地导入后引用的方法。

2、Unicode 引用（不推荐，推荐使用下面的 font-class 引用方法）

Unicode 是字体在网页最原始的应用方式，其的特点是：

• 兼容性最好，支持 ie6+，及所有现代浏览器。
• 支持按字体的方式去动态调整图标大小，颜色等等。
• 但是因为是字体，所以不支持多色。只能使用单色的图标，即使是有多色图标也会被自动去色。

使用步骤如下：
第一步：将下载的压缩文件中的文件导入到你的网站中（在线版跳过）。
需要拷贝的文件有iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff。
第二步：拷贝项目下面生成的 font-face，在此处请务必注意的是你的 font-family 的名称要与你项目中设定的相符。

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

在线版：这段代码在你的阿里字库项目中点击生成即可。

本地版：这段代码在demo_unicode.html文件中可以找到。

博主的使用方法：
博主的 Git 主题有一个 style.css 用来管理样式，所以博主直接将 font-face 这段代码拷贝到了 CSS 文件中。

第三步：定义使用 iconfont 的样式

.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;}

你可以直接复制这段代码到你的 CSS 文件中，在此处请务必注意的是你的 font-family 的名称要与你项目中设定的相符。额外样式什么的自行调整。

博主的使用方法：
博主也同样将这段代码拷贝到了 CSS 文件中，同时根据使用需求对样式进行了调整。

第四步：挑选相应图标，并应用于页面。请注意使用的字体编码要与你设置的编码相符，同时别忘了后面的那个分号。

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

博主的使用方法：
博主使用的 PSN 图标编码是  所以博主将
<i class="iconfont">&#xe602;</i>
拷入到了想要使用的地方当中。

3、font-class 引用（推荐使用）

font-class 是 unicode 使用方式的一种变种，主要是解决 unicode 书写不直观，语意不明确的问题。与 unicode 使用方式相比，具有如下特点：

• 兼容性良好，支持 ie8+，及所有现代浏览器。
• 相比于 unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
• 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 unicode 引用。
• 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：
第一步：将下载的压缩文件中的文件导入到你的网站中（在线版跳过）。
需要拷贝的文件有iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.css（该文件可不拷贝，详见下面说明）。
第二步：引用图标库项目生成的 fontclass 代码。
在线版：在项目中调整到 Font class 即可生成 CSS 的样式连接。

本地版：该文件名为iconfont.css需先拷贝到你的网站项目下再引用。

博主的使用方法：
Git 主题中的 FontAwesome 图标就采用的这种引用方法，因为已经有 style.css 文件的存在，所以我直接将 iconfont.css 文件中的内容拷贝到了 style.css 中。
其实你打开 iconfont.css 文件就会发现这个与 Unicode 引用方法文件中写入的几乎是一样的唯一的不同就是最后多了 class 声明（毕竟这个只是 Unicode 的变种），这样能够方便调用。

第三步：挑选相应图标并获取类名，应用于页面。

<i class="iconfont icon-xxx"></i>

博主的使用方法：
博主使用的 PSN 图标的 class 声明为 .icon-psn 所以博主将
<i class="iconfont icon-psn"></i>
拷贝到了想要使用的地方。

在经过了样式调整之后则会出现下面截图中的效果：

你也可以跟楼主一样将iconfont.css文件中的内容拷贝到自己的 CSS 文件中，这样就不必拷贝引用iconfont.css文件了，但同时请注意几点：

• 1、你需要注意 font-family 的名称与你的项目设定的相同。
• 2、你需要注意图标前的那个前缀 icon 应该与你的项目设定的相同。若没更改则默认是 icon。
  

4、symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个 svg 的集合，与上面两种相比具有如下特点：

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染 svg 的性能一般，还不如 png。

使用步骤如下：
第一步：将下载的压缩文件中的文件导入到你的网站中（在线版跳过）。
需要拷贝的文件有iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.js。
第二步：引入项目下面生成的 symbol 代码（这里地址写的是本地版的）。

<script src="./iconfont.js"></script>

第三步：加入通用 css 代码（引入一次就行）。

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第四步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

老实说，博主并没有使用过这种方法，所以就直接把阿里的使用说明粘贴过来了。希望以后有机会能够尝试一下这种方法吧。

参考资料：

• http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code
• Git 主题作者首页（乐趣公园）：https://gitcafe.net/
  

  ---

本文章笔记版本地址：
http://ccdd6ec5.wiz03.com/share/s/3cTmX51TMQ-b2QTact03UPg81VgjyU31jkGB2U74R-3pW7XW