fix: update icons to be compatible with Font Awesome 5

LouisBarranqueiro · Jul 30, 2018 · 2e776a1 · 2e776a1
1 parent a889ce1
commit 2e776a1
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 42 deletions.
diff --git a/_config.yml b/_config.yml
@@ -84,7 +84,7 @@ sidebar:
         mail:
             title: global.mail
             url: mailto
-            icon: fab fa-envelope
+            icon: fa fa-envelope
     rss:
         rss:
             title: global.rss
@@ -102,7 +102,7 @@ sidebar:
 # DON'T edit `header`, `right_link`, `url`, `icon` and `class` variable name
 # E.g to display a shortcut to open algolia search window :
 #     url: /#search
-#     icon: search
+#     icon: "fa fa-search"
 #     class: open-algolia-search
 header:
     right_link:
@@ -241,37 +241,37 @@ fb_app_id:
 # ```
 sharing_options:
     facebook:
-        icon: "fa-facebook-official"
+        icon: "fab fa-facebook"
         url: "https://www.facebook.com/sharer/sharer.php?u={{post.permalink}}"
     twitter:
-        icon: "fa-twitter"
+        icon: "fab fa-twitter"
         url: "https://twitter.com/intent/tweet?text={{post.permalink}}"
     google_plus:
-        icon: "fa-google-plus"
+        icon: "fab fa-google-plus"
         url: "https://plus.google.com/share?url={{post.permalink}}"
     # Asian social networks
-    # weibo:
-    #     title: "Weibo"
-    #     icon: "fa-weibo"
-    #     url: "http://service.weibo.com/share/share.php?&title={{post.permalink}}"
-    # qq:
-    #     title: "QQ"
-    #     icon: "fa-qq"
-    #     url: "http://connect.qq.com/widget/shareqq/index.html?url={{post.permalink}}&title={{post.title}}"
-    # qzone:
-    #     title: "Qzone"
-    #     icon: "fa-star"
-    #     url: "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{post.permalink}}"
-    # renren:
-    #     title: "Renren"
-    #     icon: "fa-renren"
-    #     url: "http://widget.renren.com/dialog/share?resourceUrl={{post.permalink}}"
+#    weibo:
+#        title: "Weibo"
+#        icon: "fab fa-weibo"
+#        url: "http://service.weibo.com/share/share.php?&title={{post.permalink}}"
+#    qq:
+#        title: "QQ"
+#        icon: "fab fa-qq"
+#        url: "http://connect.qq.com/widget/shareqq/index.html?url={{post.permalink}}&title={{post.title}}"
+#    qzone:
+#        title: "Qzone"
+#        icon: "fa fa-star"
+#        url: "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{post.permalink}}"
+#    renren:
+#        title: "Renren"
+#        icon: "fab fa-renren"
+#        url: "http://widget.renren.com/dialog/share?resourceUrl={{post.permalink}}"
     # Russian social networks
-    # vk:
-    #     title: "VK"
-    #     icon: "fa-vk"
-    #     url: "https://vk.com/share.php?url={{post.permalink}}"
-    # odnoklassniki:
-    #     title: "Odnoklassniki"
-    #     icon: "fa-odnoklassniki"
-    #     url: "https://connect.ok.ru/offer?url={{post.permalink}}"
+#    vk:
+#        title: "VK"
+#        icon: "fab fa-vk"
+#        url: "https://vk.com/share.php?url={{post.permalink}}"
+#    odnoklassniki:
+#        title: "Odnoklassniki"
+#        icon: "fab fa-odnoklassniki"
+#        url: "https://connect.ok.ru/offer?url={{post.permalink}}"
diff --git a/layout/_partial/about.ejs b/layout/_partial/about.ejs
@@ -30,7 +30,7 @@
         <% } %>
         <% if (theme.author.location) { %>
             <div id="about-card-location">
-                <i class="fa fa-map-marker"></i>
+                <i class="fa fa-map-marker-alt"></i>
                 <br/>
                 <%= theme.author.location %>
             </div>

diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
@@ -25,7 +25,7 @@
                 href="<% if (theme.header.right_link.url.indexOf("/") === 0) { %><%- url_for(theme.header.right_link.url.substr(1)) %><% } else { %><%- url_for(theme.header.right_link.url) %><% } %>">
         <% } %>
         <% if (theme.header.right_link.icon) { %>
-            <i class="fa fa-lg fa-<%= theme.header.right_link.icon %>"></i>
+            <i class="<%= theme.header.right_link.icon %> fa-lg"></i>
         <% } else if (authorPicture) { %>
             <img class="header-picture" src="<%= authorPicture %>" alt="<%= __('global.author_picture') %>"/>
         <% } %>

diff --git a/layout/_partial/post/actions.ejs b/layout/_partial/post/actions.ejs
@@ -36,21 +36,21 @@
             <% var url = generate_sharing_link(post, theme.sharing_options[option].url) %>
             <li class="post-action hide-xs">
                 <a class="post-action-btn btn btn--default" target="new" href="<%= url %>" title="<%= __('global.share_on_' + option) %>">
-                    <i class="fa <%= icon %>" aria-hidden="true"></i>
+                    <i class="<%= icon %>" aria-hidden="true"></i>
                 </a>
             </li>
         <% } %>
         <% if (post.comments) { %>
             <% if (theme.gitment.enable) { %>
                 <li class="post-action">
                     <a class="post-action-btn btn btn--default" href="#gitment">
-                         <i class="fa fa-comment-o"></i>
+                         <i class="fa fa-comment"></i>
                     </a>
                 </li>
             <% } else if (theme.disqus_shortname) { %>
                 <li class="post-action">
                     <a class="post-action-btn btn btn--default" href="#disqus_thread">
-                        <i class="fa fa-comment-o"></i>
+                        <i class="fa fa-comment"></i>
                     </a>
                 </li>
             <% } %>

diff --git a/layout/_partial/post/share-options.ejs b/layout/_partial/post/share-options.ejs
@@ -6,7 +6,7 @@
             <% var url = generate_sharing_link(post, theme.sharing_options[option].url) %>
             <li class="share-option">
                 <a class="share-option-btn" target="new" href="<%= url %>">
-                    <i class="fa <%= icon %>" aria-hidden="true"></i><span><%= __('global.share_on_' + option) %></span>
+                    <i class="<%= icon %>" aria-hidden="true"></i><span><%= __('global.share_on_' + option) %></span>
                 </a>
             </li>
         <% } %>

diff --git a/source/_css/components/_alert.scss b/source/_css/components/_alert.scss
@@ -22,8 +22,9 @@
             position:    absolute;
             top:         10px;
             left:        15px;
-            font-family: 'FontAwesome';
-            font-size:   2.5rem;
+            font-family: 'Font Awesome 5 Free';
+            font-weight: 600;
+            font-size:   2rem;
         }
     }
     &.info {

diff --git a/source/_css/components/_archive.scss b/source/_css/components/_archive.scss
@@ -25,12 +25,13 @@
             .archive-post-date {
                 color: map-get($colors, light);
             }
-            // Change styl of the list by adding font-awesome icon
+            // Change style of the list by adding font-awesome icon
             &::before {
-                font-family: 'FontAwesome';
+                font-family: 'Font Awesome 5 Free';
+                font-weight: 600;
                 content:     '\f0da';
                 font-size:   map-get($font-size, small);
             }
         }
     }
-}
+}
diff --git a/source/_css/components/_share-options-bar.scss b/source/_css/components/_share-options-bar.scss
@@ -46,7 +46,8 @@
                 width:   100%;
                 padding: 10px 0 10px 0;
 
-                .fa {
+                .fa,
+                .fab {
                     margin-right: 15px;
                 }
             }
@@ -115,4 +116,4 @@
     .share-options-bar {
         display: none;
     }
-}
+}