Franky's Blog

书山有路勤为径，学海无涯苦作舟……

Use Font Awesome

   Franky    hugo    ,

本博客主题为：hugo-theme-bootstrap4-blog，今天想引入一些新的Font Awesome图标。发现两个问题：

  1. Font Awesome 从 5.0 版本开始不再推荐以fa的 class 引用，对 Solid（实心）、Regular（标准）、Light（简洁）、Brands（品牌）四大分类分别使用新的命名方式：fas、far、fal、fab。

  2. 通过查看文件themes/bootstrap4/static/css/style.css，本博客主题使用Font Awesome 4.7，且只引入极少部分的图标样式。

Use Font Awesome’s Free CDN

通过使用CDN实现一个缓存版本的Font Awesome，不用下载管理Font Awesome本地文件。

在文件themes/bootstrap4/layouts/_default/baseof.html中添加链接：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">

图标用例

在模板文件themes/bootstrap4/layouts/_default/baseof.html和summary.html中修改博客文章属性显示样式

 1<p class="blog-post-meta">
 2  <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
 3    <i class="far fa-calendar-alt" aria-hidden="true"></i>
 4    &nbsp;{{ .Date.Format $dateFormat }}
 5  </time> 
 6  <i class="fas fa-user-edit" aria-hidden="true"></i>
 7  &nbsp;{{ .Params.author | default .Site.Params.author }}
 8  {{ if or (.Params.categories) (.Param    s.tags) }} 
 9    {{ partial "meta-terms.html" . }}
10  {{ end }}
11</p>
12

Share