本文提供了两种方式,一种为本地的方式,一种为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"  />

-w695

插入图标

然后在需要的位置插入图标,代码:

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

图标名称对照表:


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

1
<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

1
2
3
4
5
6
7
8
9
@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');
}

Fontclass

1
//at.alicdn.com/t/font_1891866_qo793wp12h.css

Symbol

1
//at.alicdn.com/t/font_1891866_qo793wp12h.js

参考文章

参考文章:插入知识共享标志(CC Icons)

相关资源

CC图标图标包:立即下载