在一些页面上，可以看到一些小图标，非常漂亮。如下：
这些小图标看上去非常可爱，给页面带来更好观赏性的同时也提高用户的交互体验，这里简单介绍一下如何在页面中添加这些漂亮小图标，使自己的导航链接从这样子，
变成这样子。这里还是以light_cn主题为例来介绍，看我是如何给页面加上这些小图标的。
这些小图标本质上其实是一种字体，并不是嵌入的图片，当你从页面代码上去查看这个元素的时候，你可能会发现这个：
但是，content是个什么玩意？\f015这又是个啥玩意？
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
这样就清晰了一点，在定义有before伪元素前面添加了一个叫\f015的玩意，这个玩意显示出来就是小房子这个小图标。
好了，那么怎么能随心所欲的添加我们想要的小图标呢？
1. 基本原理
这些图标字体肯定是某人或者某组织设计出来了，这里就要提到Font Awesome这个网站了，据我所知，绝大部分Hexo站点使用的免费icon都是出自这个网站，它是挂在Github上的一个开源项目。
首先将项目文件下载下来，这里我们只使用css和fonts两个文件夹，将他们拷贝进Hexo项目主题目录下source目录中。（注意：拷贝进主题目录下的source目录中）
然后在主题目录下layout/_partial/head.ejs文件中引用这个css样式文件，添加如下一行代码。
<!-- Font-Awesome -->
<link rel="stylesheet" href="<%- url_for('/font-awesome/css/font-awesome.min.css') %>">
接下来你就可以随心所欲的使用它了，使用方法很简单，在你需要显示小图标的元素上加上class="fa fa-***"样式即可。
例如，首页链接前面加个小房子图标：<a class="fa fa-home">首页</a>即可。fa定义了要使用的Font是FontAwesome；fa-home代表的就是小房子图标，它的Content值都已经在font-awesome.min.css中定义好了，如下房子图标的Content值为\f015：
.fa-home:before {
content: "\f015";
}
2. 导航链接小图标
light_cn主题的导航链接是通过主题配置文件中menu以及submenu来进行配置的，如下：
menu:
home: /
archives: /archives
books: /hexo
about: /resume
submenu:
rss: /atom.xml
customization: /customization
这些链接通过配置需要随时变化，并不是直接写死在布局文件中的，所以无法直接给a标签添加class属性，所以我参照了Next主题的处理办法，链接的图标名称对应关系以配置文件的方式进行维护。如下：
menu_icon:
home: home
archives: archive
books: book
about: user
rss: rss
customization: question-circle
针对每一个导航链接都对应有一个图标名称，该名称即是fa-***中星星字符所代表的图标。全部图标的对应关系请参照Font Awesome Icons，这些列举了官方提供的所有图标。
最后修改layout/_partial/header.ejs导航部分代码如下：
<div class='header-nav-content inner'>
<div id="main-nav" class="alignleft">
<% for (var i in theme.menu){ %>
<a href="<%- theme.menu[i] %>"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%- __(i) %></a>
<% } %>
</div>
<div id="sub-nav" class="alignright">
<% for (var i in theme.submenu){ %>
<a href="<%- theme.submenu[i] %>"><i class="fa fa-<%- theme.menu_icon[i] %>"></i><%- __(i) %></a>
<% } %>
</div>
</div>
通过menu找到要显示的导航链接，然后通过menu_icon找到显示的图标样式，赋予到class属性上即可。
3. 不同布局的图标
light_cn主题中针对不同的布局，会显示不同的导航图标。例如：
点击分类的时候显示文件夹图标
点击标签的时候显示标签图标
点击日期归档的时候显示日历图标
这个如何实现呢？这个就需要借助Hexo提供的变量来实现，不同的布局下具有不同的变量，例如分类布局具有page.category变量等等，然后通过判断，设置不同的图标即可。详细见如下代码：
<h2 class="archive-title<% if (page.tag){ %> fa-tag<% } else if (page.category){ %> fa-folder<% } else if (page.archive){ %> fa-calendar<% } %>"><%= title %></h2>
tag布局图标fa-tag；category布局图标fa-folder；archive布局图标fa-calendar。
除了通过使用class属性值外，还可以直接在css中定义某个元素的Font以及content属性值便可，这样就可以更灵活的实现一些样式。
网友评论