如何在博客的页脚中引用CC版权声明图标

本文提供了两种方式，一种为本地的方式，一种为iconfont的方式。

使用本地图标的方式

资源下载

首先在文末下载图标包

以下内容适用于butterfly主题，其他主题可以参考借鉴

导入文件

将文件夹解压，并将其中的fonts文件夹放入主题文件夹的资源目录中：~/themes/butterfly/source/fonts

将css文件夹中的cc-icons.min.css文件移动到主题的css目录：~/themes/butterfly/source/css/cc-icons.min.css

引入css

在~/themes/butterfly/_config.yml中找到inject部分，注入

1	<link rel="stylesheet" href="/css/cc-icons.min.css" type="text/css" />

插入图标

然后在需要的位置插入图标，代码：

1	<i class="cc cc-by"></i>

图标名称对照表：

本博客目前样式参考代码：

<a target="_blank" title="非转载内容的CC声明：署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)" href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh"><i class="cc cc-cc"></i>&#8195;<i class="cc cc-by"></i>&#8195;<i class="cc cc-nc"></i>&#8195;<i class="cc cc-nd"></i></a>

使用iconfront

我已经在iconfont上传好了所有的独立图标，可以直接使用。具体使用方法详见iconfont使用说明

图标表

Unicode

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