当前位置 : 首页 » 文章分类 :  开发  »  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)添加百度推荐

阅读
833
阅读预计3分钟
创建日期 2017-09-26
修改日期 2017-12-03
类别
标签
百度推荐