Upgrade from Font Awesome v4 to v5 (#659)

Require Hugo v0.48+

data/assets.toml

@@ -67,9 +67,9 @@
   sri = "sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw=="
   url = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/css/bootstrap.min.css"
 [css.fontAwesome]
-  version = "4.7.0"
-  sri = "sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
-  url = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/%s/css/font-awesome.min.css"
+  version = "5.3.1"
+  sri = "sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
+  url = "https://use.fontawesome.com/releases/v%s/css/all.css"
 [css.academicons]
   version = "1.8.6"
   sri = "sha256-uFVgMKfistnJAfoCUQigIl+JfUaP47GrRKjf6CTPVmw="

exampleSite/config.toml

@@ -208,30 +208,30 @@ enableGitInfo = false
 
   # Social/Academic Networking
   #
-  # Icon pack "fa" includes the following social network icons:
+  # Icon pack "fab" includes the following social network icons:
   #
   #   twitter, weibo, linkedin, github, facebook, pinterest, google-plus,
   #   youtube, instagram, soundcloud
   #
-  #   For email icon, use "fa" icon pack, "envelope" icon, and
+  #   For email icon, use "fas" icon pack, "envelope" icon, and
   #   "mailto:your@email.com" as the link.
   #
-  #   Full list: https://fortawesome.github.io/Font-Awesome/icons/
+  #   Full list: https://fontawesome.com/icons
   #
-  # Icon pack "ai" includes the following academic network icons:
+  # Icon pack "ai" includes the following academic icons:
   #
-  #   google-scholar, arxiv, orcid, researchgate, mendeley
+  #   cv, google-scholar, arxiv, orcid, researchgate, mendeley
   #
   #   Full list: https://jpswalsh.github.io/academicons/
 
   [[params.social]]
     icon = "envelope"
-    icon_pack = "fa"
+    icon_pack = "fas"
     link = "mailto:test@example.org"
 
   [[params.social]]
     icon = "twitter"
-    icon_pack = "fa"
+    icon_pack = "fab"
     link = "//twitter.com/GeorgeCushen"
 
   [[params.social]]
@@ -241,7 +241,7 @@ enableGitInfo = false
 
   [[params.social]]
     icon = "github"
-    icon_pack = "fa"
+    icon_pack = "fab"
     link = "//github.com/gcushen"
 
   # Link to a PDF of your resume/CV from the About widget.

exampleSite/content/home/hero.md

@@ -21,7 +21,7 @@ weight = 3
 #   Deactivate by commenting out parameters, prefixing lines with `#`.
 [cta]
   url = "./post/getting-started/"
-  label = '<i class="fa fa-download"></i> Install Now'
+  label = '<i class="fas fa-download"></i> Install Now'
 +++
 
 The highly flexible website framework for Hugo with an extensible plugin mechanism. Create a beautifully simple site in under 10 minutes :rocket:

layouts/partials/article_metadata.html

@@ -50,7 +50,7 @@
   {{ if gt $categoriesLen 0 }}
   <span class="middot-divider"></span>
   <span class="article-categories">
-    <i class="fa fa-folder"></i>
+    <i class="fas fa-folder"></i>
     {{ range $k, $v := $.Params.categories }}
     <a href="{{ ($.Site.GetPage (printf "categories/%s" .)).Permalink }}">{{ . }}</a>
     {{- if lt $k (sub $categoriesLen 1) -}}, {{ end }}

layouts/partials/css/academic.css

@@ -252,8 +252,9 @@ small,
 }
 
 #search-box::before {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
   content: "\f002";
-  font-family: FontAwesome;
   font-size: 1rem;
   opacity: 0.25;
   line-height: 1rem;
@@ -612,7 +613,7 @@ ul.share li:last-of-type {
   margin-right: 0;
 }
 
-ul.share li .fa {
+ul.share li i {
   display: block;
   width: 30px;
   height: 30px;
@@ -631,7 +632,7 @@ ul.share li a {
   margin: 0;
 }
 
-ul.share li:hover .fa {
+ul.share li:hover i {
   transform: scale(1.4)
 }
 
@@ -974,7 +975,8 @@ article .article-metadata {
   transform: translate(0, -50%);
   opacity: 0;
   transition: all 0.2s ease-out;
-  font-family: 'FontAwesome';
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
   content: '\f0c1';
   text-align: center;
   font-size: 3rem;
@@ -1488,15 +1490,18 @@ div.alert p:first-child::before {
   position: absolute;
   top: -0.5rem;
   left: -2rem;
-  font-family: 'FontAwesome';
   font-size: 1.5rem;
   color: #fff;
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
   content: '\f05a';
   width: 1.5rem;
   text-align: center;
 }
 
 div.alert-warning p:first-child::before {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
   content: '\f071';
 }
 

layouts/partials/footer_container.html

@@ -18,7 +18,7 @@
       <span class="pull-right" aria-hidden="true">
         <a href="#" id="back_to_top">
           <span class="button_icon">
-            <i class="fa fa-chevron-up fa-2x"></i>
+            <i class="fas fa-chevron-up fa-2x"></i>
           </span>
         </a>
       </span>
@@ -40,10 +40,10 @@ <h4 class="modal-title">{{ i18n "btn_cite" }}</h4>
       </div>
       <div class="modal-footer">
         <a class="btn btn-primary btn-outline js-copy-cite" href="#" target="_blank">
-          <i class="fa fa-copy"></i> {{ i18n "btn_copy" }}
+          <i class="fas fa-copy"></i> {{ i18n "btn_copy" }}
         </a>
         <a class="btn btn-primary btn-outline js-download-cite" href="#" target="_blank">
-          <i class="fa fa-download"></i> {{ i18n "btn_download" }}
+          <i class="fas fa-download"></i> {{ i18n "btn_download" }}
         </a>
         <div id="modal-error"></div>
       </div>

layouts/partials/navbar.html

@@ -51,7 +51,7 @@
         </li>
 
         {{ else }}
-        
+
         {{/* Set target for link. */}}
         {{ $.Scratch.Set "target" "" }}
         {{ if gt (len .URL) 4 }}
@@ -80,7 +80,7 @@
       {{ end }}
         <li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
-            <i class="fa fa-globe" aria-hidden="true"></i>
+            <i class="fas fa-globe" aria-hidden="true"></i>
             <span>{{ index .Site.Data.i18n.languages .Lang }}</span>
           </a>
           <ul class="dropdown-menu">

layouts/partials/post_li_simple.html

@@ -1,6 +1,6 @@
 {{ $post := .post }}
 
 <div class="pub-list-item" itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
-  <i class="fa fa-newspaper-o pub-icon" aria-hidden="true"></i>
+  <i class="far fa-newspaper pub-icon" aria-hidden="true"></i>
   <a href="{{ $post.Permalink }}" itemprop="url"><span itemprop="headline">{{ $post.Title }}</span></a>
 </div>

layouts/partials/publication_li_apa.html

@@ -1,5 +1,5 @@
 <div class="pub-list-item" style="margin-bottom: 1rem" itemscope itemtype="http://schema.org/CreativeWork">
-  <i class="fa fa-file-text-o pub-icon" aria-hidden="true"></i>
+  <i class="far fa-file-alt pub-icon" aria-hidden="true"></i>
   <span itemprop="author">
     {{ with .Params.authors }}
       {{- delimit . ", " | markdownify -}}

layouts/partials/publication_li_mla.html

@@ -1,5 +1,5 @@
 <div class="pub-list-item" style="margin-bottom: 1rem" itemscope itemtype="http://schema.org/CreativeWork">
-  <i class="fa fa-file-text-o pub-icon" aria-hidden="true"></i>
+  <i class="far fa-file-alt pub-icon" aria-hidden="true"></i>
   <span itemprop="author">
     {{ with .Params.authors }}
       {{- delimit . ", " | markdownify -}}

layouts/partials/publication_li_simple.html

@@ -1,5 +1,5 @@
 <div class="pub-list-item" style="margin-bottom: 1rem" itemscope itemtype="http://schema.org/CreativeWork">
-  <i class="fa fa-file-text-o pub-icon" aria-hidden="true"></i>
+  <i class="far fa-file-alt pub-icon" aria-hidden="true"></i>
   <a href="{{ .Permalink }}" itemprop="name">{{ .Title }}</a>
   <div itemprop="author">
     {{ with .Params.authors }}

layouts/partials/share.html

@@ -5,34 +5,34 @@
       <a class="twitter"
          href="https://twitter.com/intent/tweet?text={{ .Title | html }}&amp;url={{ .Permalink | html }}"
          target="_blank" rel="noopener">
-        <i class="fa fa-twitter"></i>
+        <i class="fab fa-twitter"></i>
       </a>
     </li>
     <li>
       <a class="facebook"
          href="https://www.facebook.com/sharer.php?u={{ .Permalink | html }}"
          target="_blank" rel="noopener">
-        <i class="fa fa-facebook"></i>
+        <i class="fab fa-facebook-f"></i>
       </a>
     </li>
     <li>
       <a class="linkedin"
          href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ .Permalink | html }}&amp;title={{ .Title | html }}"
          target="_blank" rel="noopener">
-        <i class="fa fa-linkedin"></i>
+        <i class="fab fa-linkedin-in"></i>
       </a>
     </li>
     <li>
       <a class="weibo"
          href="http://service.weibo.com/share/share.php?url={{ .Permalink | html }}&amp;title={{ .Title | html }}"
          target="_blank" rel="noopener">
-        <i class="fa fa-weibo"></i>
+        <i class="fab fa-weibo"></i>
       </a>
     </li>
     <li>
       <a class="email"
          href="mailto:?subject={{ .Title | html }}&amp;body={{ .Permalink | html }}">
-        <i class="fa fa-envelope"></i>
+        <i class="fas fa-envelope"></i>
       </a>
     </li>
   </ul>

layouts/partials/talk_li_simple.html

@@ -1,5 +1,5 @@
 <div class="pub-list-item" style="margin-bottom: 1rem" itemscope itemtype="http://schema.org/Event">
-  <i class="fa fa-calendar pub-icon" aria-hidden="true"></i>
+  <i class="fas fa-calendar-alt pub-icon" aria-hidden="true"></i>
   <span itemprop="name"><a href="{{ .Permalink }}">{{ .Title }}</a></span>
   <div itemprop="startDate">
     {{ $date := .Params.time_start | default .Date }}

layouts/partials/widgets/about.html

@@ -41,9 +41,13 @@ <h3 itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
       <ul class="network-icon" aria-hidden="true">
         {{ range $.Site.Params.social }}
         {{ $pack := or .icon_pack "fa" }}
+        {{ $pack_prefix := $pack }}
+        {{ if in (slice "fab" "fas" "far" "fal") $pack }}
+          {{ $pack_prefix = "fa" }}
+        {{ end }}
         <li>
           <a itemprop="sameAs" href="{{ .link | safeURL }}" target="_blank" rel="noopener">
-            <i class="{{ $pack }} {{ $pack }}-{{ .icon }} big-icon"></i>
+            <i class="{{ $pack }} {{ $pack_prefix }}-{{ .icon }} big-icon"></i>
           </a>
         </li>
         {{ end }}
@@ -74,7 +78,7 @@ <h3>{{ i18n "education" | markdownify }}</h3>
         <ul class="ul-edu fa-ul">
           {{ range .courses }}
           <li>
-            <i class="fa-li fa fa-graduation-cap"></i>
+            <i class="fa-li fas fa-graduation-cap"></i>
             <div class="description">
               <p class="course">{{ .course }}{{ with .year }}, {{ . }}{{ end }}</p>
               <p class="institution">{{ .institution }}</p>

layouts/partials/widgets/contact.html

@@ -15,7 +15,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
 
       {{ with $.Site.Params.email }}
       <li>
-        <i class="fa-li fa fa-envelope fa-2x" aria-hidden="true"></i>
+        <i class="fa-li fas fa-envelope fa-2x" aria-hidden="true"></i>
         <span id="person-email" itemprop="email">
         {{- if $autolink }}<a href="mailto:{{ . }}">{{ . }}</a>{{ else }}{{ . }}{{ end -}}
         </span>
@@ -24,7 +24,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
 
       {{ with $.Site.Params.discussion }}
       <li>
-        <i class="fa-li fa fa-comments-o fa-2x" aria-hidden="true"></i>
+        <i class="fa-li fas fa-comments fa-2x" aria-hidden="true"></i>
         <span>
           <a href="{{ .url }}" target="_blank" rel="noopener">{{ .name }}</a>
         </span>
@@ -33,7 +33,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
 
       {{ with $.Site.Params.keybase }}
       <li>
-        <i class="fa-li fa fa-lock fa-2x" aria-hidden="true"></i>
+        <i class="fa-li fab fa-keybase fa-2x" aria-hidden="true"></i>
         <span>
           <a href="https://keybase.io/{{ . }}" target="_blank" rel="noopener">@{{ . }}</a> on Keybase.
         </span>
@@ -42,7 +42,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
 
       {{ with $.Site.Params.phone }}
       <li>
-        <i class="fa-li fa fa-phone fa-2x" aria-hidden="true"></i>
+        <i class="fa-li fas fa-phone fa-2x" aria-hidden="true"></i>
         <span id="person-telephone" itemprop="telephone">
         {{- if $autolink }}<a href="tel:{{ . }}">{{ . }}</a>{{ else }}{{ . }}{{ end -}}
         </span>
@@ -51,7 +51,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
 
       {{ with $.Site.Params.skype }}
       <li>
-        <i class="fa-li fa fa-skype fa-2x" aria-hidden="true"></i>
+        <i class="fa-li fab fa-skype fa-2x" aria-hidden="true"></i>
         <span>
         {{- if $autolink }}<a href="skype:{{ . }}?call">{{ . }}</a>{{ else }}{{ . }}{{ end -}}
         </span>
@@ -60,7 +60,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
 
       {{ with $.Site.Params.telegram }}
       <li>
-        <i class="fa-li fa fa-telegram fa-2x" aria-hidden="true"></i>
+        <i class="fa-li fab fa-telegram fa-2x" aria-hidden="true"></i>
         <span>
         {{- if $autolink }}<a href="https://telegram.me/{{ . }}" target="_blank" rel="noopener">@{{ . }}</a>{{ else }}@{{ . }}{{ end -}}
         </span>
@@ -69,14 +69,14 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
 
       {{ with $.Site.Params.address }}
       <li>
-        <i class="fa-li fa fa-map-marker fa-2x" aria-hidden="true"></i>
+        <i class="fa-li fas fa-map-marker fa-2x" aria-hidden="true"></i>
         <span id="person-address" itemprop="address">{{ replace . "\n" "<br>" | safeHTML }}</span>
       </li>
       {{ end }}
 
       {{ with $.Site.Params.office_hours }}
       <li>
-        <i class="fa-li fa fa-clock-o fa-2x" aria-hidden="true"></i>
+        <i class="fa-li fas fa-clock fa-2x" aria-hidden="true"></i>
         <span>{{ . }}</span>
       </li>
       {{ end }}

layouts/partials/widgets/posts.html

@@ -12,7 +12,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     <p class="view-all">
       <a href="{{ ($.Site.GetPage "section" "post").Permalink }}">
         {{ i18n "more_posts" | markdownify }}
-        <i class="fa fa-angle-double-right"></i>
+        <i class="fas fa-angle-double-right"></i>
       </a>
     </p>
     {{ end }}

layouts/partials/widgets/projects.html

@@ -41,7 +41,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     <div class="row isotope projects-container js-layout-row">
         {{ range where $.Site.RegularPages "Type" ($page.Params.folder | default "project") }}
         <div class="col-md-12 project-item isotope-item {{ delimit (apply .Params.tags "urlize" ".") " " }}" itemscope itemtype="http://schema.org/CreativeWork">
-          <i class="fa fa-files-o pub-icon" aria-hidden="true"></i>
+          <i class="far fa-copy pub-icon" aria-hidden="true"></i>
 
           <span class="project-title">
           {{ if .Content }}

layouts/partials/widgets/publications.html

@@ -11,7 +11,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     <p class="view-all">
       <a href="{{ ($.Site.GetPage "section" "publication").Permalink }}">
         {{ i18n "more_publications" | markdownify }}
-        <i class="fa fa-angle-double-right"></i>
+        <i class="fas fa-angle-double-right"></i>
       </a>
     </p>
     {{ end }}

layouts/partials/widgets/talks.html

@@ -11,7 +11,7 @@ <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     <p class="view-all">
       <a href="{{ ($.Site.GetPage "section" "talk").Permalink }}">
         {{ i18n "more_talks" | markdownify }}
-        <i class="fa fa-angle-double-right"></i>
+        <i class="fas fa-angle-double-right"></i>
       </a>
     </p>
     {{ end }}

theme.toml

@@ -3,7 +3,7 @@ license = "MIT"
 licenselink = "https://github.com/gcushen/hugo-academic/blob/master/LICENSE.md"
 description = "Easily create beautifully simple academic or personal sites"
 homepage = "https://github.com/gcushen/hugo-academic"
-min_version = 0.38
+min_version = 0.48
 tags = ["academic",
         "portfolio",
         "responsive",