当前位置 : 首页 » 文章分类 :  开发  »  Hexo博客(17)使用FontAwesome字体图标

Hexo博客(17)使用FontAwesome字体图标

可以看到我用的free2mind主题的文章页侧边栏每个条目前的灰色小图标非常精致好看，就去研究了下作者的主题源码，原来是使用了font-awesome字体图标。

Hexo博客安装FontAwesome字体图标

http://fontawesome.dashgame.com/ 网站上介绍了使用方法：
如果您使用了默认的Bootstrap CSS样式，那么你可以使用这种方式来引入默认的Font Awesome CSS样式。

  • 1、复制整个 font-awesome 文件夹到您的项目中。

  • 2、在HTML的<head>中引用font-awesome.min.css。
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

  • 3、您可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀fa，再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用<i>，因为它更简洁：
    <i class="fa fa-camera-retro"></i> fa-camera-retro

具体到freemind主题中：
font-awesome.css在/themes/freemind/source/css/中，在主题的layout/_partial/head.ejs模版中引用了这个css：
<link rel="stylesheet" href="<%- config.root %>css/font-awesome.css" media="screen" type="text/css">
字体文件在themes/freemind/source/fonts/目录中。很多地方使用了FontAwesome字体图标，例如文章侧边栏模版meta.ejs中的<i class="fa fa-tags"></i>引用图标；主题的配置文件_config.yml中，菜单项、友情链接项中都是引用了fontawesome图标：icon: "fa fa-archive"

如何选择想要的图标？

我们可以上 http://fontawesome.dashgame.com/ 网站上选自己喜欢的图标，在 font-awesome.css 中查看引用id，然后在需要的地方使用。
比如我想将侧边栏文章日期前的小时钟图标换为日历图标，在网站上搜一下calendar，找到图标calendar，去font-awesome.css中查找其id为fa-calendar，在ejs中替换默认的fa-clock-o。

动画图标

使用fa-spin类来使任意图标旋转，<i class="fa fa-tags fa-spin"></i>即可使fa-tags图标旋转。

具体到我的博客，我将主页侧边栏的“友情链接“中“我的CSDN博客”前的小足球改为旋转的了。
在主题的配置文件_config.yml中，在图标引用中加上fa-spin类：

links:
  - title: "我的CSDN博客"
    url: http://blog.csdn.net/masikkk
    intro: "我的CSDN博客"
    icon: "fa fa-soccer-ball-o fa-spin"

更新FontAwesome4.7.0版

原freemind主题中自带的FontAwesome字体版本比较旧，很多新出的图标没有，自己更新到目前最新的4.7.0版。
下面是基于free2mind主题的，和freemind主题类似。
http://fontawesome.dashgame.com/ 网站上下载4.7.0版本，解压后将css文件夹中的font-awesome.css和font-awesome.min.css拷贝到themes\free2mind\source\css目录中，替换原来的font-awesome.css。
注：font-awesome.css和font-awesome.min.css内容应该是一样的，只不过font-awesome.css有换行，看起来更方便，引用哪个都行。
将fonts文件夹中的所有文件拷贝到themes\free2mind\source\fonts目录中，替换原来已有的FontAwesome字体文件。这样FontAwesome4.7.0版就安装好了。

重新hexo g生成博客，预览下，可以看到用到FontAwesome字体图标的地方没有变化，因为新版本图标包含了所有之前的图标。

上一篇 Hexo博客(18)添加字数和阅读时长统计

下一篇 Hexo博客(16)添加百度推荐

阅读
评论
879字
阅读预计3分钟
创建日期 2017-09-26
修改日期 2017-12-03
类别
标签
目录

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论

▲