Merge pull request #21 from Drakmyth/feature/font-awesome-5

Update Font Awesome to version 5.1.0

README.md

@@ -40,7 +40,8 @@ All new sections should be added as html or Markdown documents in the `_sections
 - `order` (required; orders the sequence of sections on the page. Example: `1`)
 - `cover-photo` (optional; sets a background image for the section. Example: `assets/images/banner.jpg`)
 - `cover-photo-alt` (required if using a cover photo. Describes the photo for screen readers and SEO; e.g. "Dome of Light art installation, Kaohsiung, Taiwan")
-- `icon` (optional; see [Font Awesome](http://fontawesome.io/icons/) for icon codes. Example: `fa-github`)
+- `icon` (optional; see [Font Awesome](https://fontawesome.com/icons) for icon codes. Example: `fa-github`)
+- `icon-style` (optional; "solid" is default, "regular" for outline style icons, or "brands" for logos)
 - `auto-header` (optional; "use-title" is default, "none" for no header, or custom header text)
 - `hide` (optional; if `true`, the section won't appear)
 
@@ -71,7 +72,8 @@ layout: page
 You can also set these page variables in the frontmatter, if you want:
 - `subtitle`
 - `order` (orders links in the nav menu, e.g. `1`)
-- `icon` (optional; see [Font Awesome](http://fontawesome.io/icons/) for icon codes. Example: `fa-github`)
+- `icon` (optional; see [Font Awesome](https://fontawesome.com/icons) for icon codes. Example: `fa-github`)
+- `icon-style` (optional; "solid" is default, "regular" for outline style icons, or "brands" for logos)
 - `hide` (optional; if `true`, a link won't appear in the nav menu. All this does is remove the nav link; your page will still be served to anyone who has the URL.)
 
 **This same set of frontmatter variables (including `title`) can also be set in `index.md` and `blog.html`.** You may want to give them titles, or hide the homepage link with `hide: true` if the homepage is the only page.

_includes/head.html

@@ -35,6 +35,7 @@
   <link rel="stylesheet" href="{{- 'assets/css/main.css' | relative_url -}}" />
   <!--[if lte IE 8]><link rel="stylesheet" href="{{- 'assets/css/ie8.css' | relative_url -}}" /><![endif]-->
   <!--[if lte IE 9]><link rel="stylesheet" href="{{- 'assets/css/ie9.css' | relative_url -}}" /><![endif]-->
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
 
   <!-- Scripts -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" defer></script>

_includes/nav.html

@@ -13,14 +13,21 @@
         {%- assign _title = _page.title | default: _page.layout -%}
         {%- assign _slug = _title | slugify -%}
         {%- assign _icon = _page.icon | default: 'fa-link' -%}
+        {%- if _page.icon-style == 'regular' -%}
+          {%- assign _class = 'icon-r' -%}
+        {%- elsif _page.icon-style == 'brands' -%}
+          {%- assign _class = 'icon-b' -%}
+        {%- else -%}
+          {%- assign _class = 'icon' -%}
+        {%- endif -%}
         {%- comment -%}<!-- page.url (no underscore) is the url of the current page-->{%- endcomment -%}
         {%- if _page.url == page.url -%}
           <li><a href="#" id="{{- _slug -}}" class="active">
-            <span class="icon {{ _icon }}">{{- _title -}}</span>
+            <span class="{{ _class }} {{ _icon }}">{{- _title -}}</span>
           </a></li>
         {%- elsif _page.url -%}
           <li><a href="{{- _page.url | absolute_url -}}" id="{{- _slug -}}-link">
-            <span class="icon {{ _icon }}">{{- _title -}}</span>
+            <span class="{{ _class }} {{ _icon }}">{{- _title -}}</span>
           </a></li>
         {%- else -%}
           <li><a href="{{- '/' | absolute_url -}}" id="broken-link"><span class="icon fa-unlink">[broken link]</span></a></li>
@@ -34,7 +41,14 @@
         {%- assign _title = _sect.title | default: _sect.layout | default: 'Untitled' -%}
         {%- assign _slug = _title | slugify -%}
         {%- assign _icon = _sect.icon | default: 'fa-file' -%}
-        <li><a href="#{{- _slug -}}" id="{{- _slug -}}-link" class="scrolly"><span class="icon {{ _icon }}">{{- _title -}}</span></a></li>
+        {%- if _sect.icon-style == 'regular' -%}
+          {%- assign _class = 'icon-r' -%}
+        {%- elsif _sect.icon-style == 'brands' -%}
+          {%- assign _class = 'icon-b' -%}
+        {%- else -%}
+          {%- assign _class = 'icon' -%}
+        {%- endif -%}
+        <li><a href="#{{- _slug -}}" id="{{- _slug -}}-link" class="scrolly"><span class="{{ _class }} {{ _icon }}">{{- _title -}}</span></a></li>
       {%- endfor -%}
     {%- endunless -%}
   </ul>

_includes/social_icons.html

@@ -1,31 +1,31 @@
 <!-- Social Icons -->
 <ul class="icons">
   {%- if site.twitter_url -%}
-  <li><a href="{{- site.twitter_url -}}" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
+  <li><a href="{{- site.twitter_url -}}" class="icon-b fa-twitter"><span class="label">Twitter</span></a></li>
   {%- endif -%}
   {%- if site.facebook_url -%}
-  <li><a href="{{- site.facebook_url -}}" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
+  <li><a href="{{- site.facebook_url -}}" class="icon-b fa-facebook-f"><span class="label">Facebook</span></a></li>
   {%- endif -%}
   {%- if site.googleplus_url -%}
-  <li><a href="{{- site.googleplus_url -}}" class="icon fa-google-plus"><span class="label">Google Plus</span></a></li>
+  <li><a href="{{- site.googleplus_url -}}" class="icon-b fa-google-plus-g"><span class="label">Google Plus</span></a></li>
   {%- endif -%}
   {%- if site.instagram_url -%}
-  <li><a href="{{- site.instagram_url -}}" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
+  <li><a href="{{- site.instagram_url -}}" class="icon-b fa-instagram"><span class="label">Instagram</span></a></li>
   {%- endif -%}
   {%- if site.linkedin_url -%}
-  <li><a href="{{- site.linkedin_url -}}" class="icon fa-linkedin"><span class="label">LinkedIn</span></a></li>
+  <li><a href="{{- site.linkedin_url -}}" class="icon-b fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
   {%- endif -%}
   {%- if site.github_url -%}
-  <li><a href="{{- site.github_url -}}" class="icon fa-github"><span class="label">GitHub</span></a></li>
+  <li><a href="{{- site.github_url -}}" class="icon-b fa-github"><span class="label">GitHub</span></a></li>
   {%- endif -%}
   {%- if site.pinterest_url -%}
-  <li><a href="{{- site.pinterest_url -}}" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
+  <li><a href="{{- site.pinterest_url -}}" class="icon-b fa-pinterest"><span class="label">Pinterest</span></a></li>
   {%- endif -%}
   {%- if site.slack_url -%}
-  <li><a href="{{- site.slack_url -}}" class="icon fa-slack"><span class="label">Slack</span></a></li>
+  <li><a href="{{- site.slack_url -}}" class="icon-b fa-slack-hash"><span class="label">Slack</span></a></li>
   {%- endif -%}
   {%- if site.dribbble_url -%}
-  <li><a href="{{- site.dribbble_url -}}" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
+  <li><a href="{{- site.dribbble_url -}}" class="icon-b fa-dribbble"><span class="label">Dribbble</span></a></li>
   {%- endif -%}
   {%- if site.email -%}
   <li><a href="mailto:{{- site.email -}}" class="icon fa-envelope"><span class="label">Email</span></a></li>

_posts/2014-09-12-third-post.md

@@ -2,7 +2,8 @@
 title: Third Post
 author: Chris
 layout: post
-icon: fa-lightbulb-o
+icon: fa-lightbulb
+icon-style: regular
 ---
 See the icon?
 

_posts/2018-01-12-elements.html

@@ -34,11 +34,12 @@ <h3>Unordered</h3>
 
 			<h3>Icons</h3>
 			<ul class="icons">
-				<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
-				<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
-				<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
-				<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
-				<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
+				<li><a href="#" class="icon fa-envelope"><span class="label">Twitter</span></a></li>
+				<li><a href="#" class="icon-r fa-envelope"><span class="label">Twitter</span></a></li>
+				<li><a href="#" class="icon fa-user"><span class="label">Facebook</span></a></li>
+				<li><a href="#" class="icon-r fa-user"><span class="label">Instagram</span></a></li>
+				<li><a href="#" class="icon-b fa-github"><span class="label">Github</span></a></li>
+				<li><a href="#" class="icon-b fa-github-alt"><span class="label">Dribbble</span></a></li>
 			</ul>
 
 		</div>

_sass/jekyll-theme-prologue.scss

@@ -2,7 +2,6 @@
 @import 'libs/functions';
 @import 'libs/mixins';
 @charset "UTF-8";
-@import url("font-awesome.min.css");
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");
 
 /*
@@ -472,23 +471,15 @@
 /* Icons */
 
 	.icon {
-		text-decoration: none;
+		@include icon(before);
+	}
 
-		&:before {
-			display: inline-block;
-			font-family: FontAwesome;
-			font-size: 1.25em;
-			text-decoration: none;
-			font-style: normal;
-			font-weight: normal;
-			line-height: 1;
-			-webkit-font-smoothing: antialiased;
-			-moz-osx-font-smoothing: grayscale;
-		}
+	.icon-r {
+		@include icon(before, regular);
+	}
 
-		> .label {
-			display: none;
-		}
+	.icon-b {
+		@include icon(before, brands);
 	}
 
 /* Header */
@@ -593,7 +584,7 @@
 						display: block;
 						font-size: 0.8em;
 
-						&:before {
+						&::before {
 							position: absolute;
 							left: 0;
 							color: #41484c;
@@ -608,7 +599,7 @@
 						box-shadow: inset 0 0 0.25em 0 rgba(0, 0, 0, 0.125);
 						color: #fff;
 
-						span:before {
+						span::before {
 							color: #e27689;
 						}
 					}
@@ -840,7 +831,7 @@
 							span {
 								padding-right: 2.25em;
 
-								&:before {
+								&::before {
 									left: 100%;
 									margin-left: -1.25em;
 									line-height: 2.25em;
@@ -981,11 +972,11 @@
 					outline: 0;
 					border: 0;
 
-					&:before {
-						font-family: FontAwesome;
+					&::before {
+						font-family: "Font Awesome 5 Free";
 						text-decoration: none;
 						font-style: normal;
-						font-weight: normal;
+						font-weight: 900;
 						-webkit-font-smoothing: antialiased;
 						-moz-osx-font-smoothing: grayscale;
 						content: '\f0c9';
@@ -1115,4 +1106,4 @@
 				}
 			}
 
-	}
+	}

_sass/libs/_mixins.scss

@@ -1,25 +1,43 @@
-/// Makes an element's :before pseudoelement a FontAwesome icon.
-/// @param {string} $content Optional content value to use.
+/// Makes an element's ::before pseudoelement a FontAwesome icon.
 /// @param {string} $where Optional pseudoelement to target (before or after).
-@mixin icon($content: false, $where: before) {
+/// @param {string} $style Which font to use (solid, regular, or brands).
+/// @param {string} $content Optional content value to use.
+@mixin icon($where: before, $style: solid, $content: false) {
 
 	text-decoration: none;
 
-	&:#{$where} {
+	&::#{$where} {
 
 		@if $content {
 			content: $content;
 		}
 
-		-moz-osx-font-smoothing: grayscale;
-		-webkit-font-smoothing: antialiased;
-		font-family: FontAwesome;
-		font-style: normal;
-		font-weight: normal;
-		text-transform: none !important;
+		@if $style == brands {
+			font-family: "Font Awesome 5 Brands";
+		}
+		@else {
+			font-family: "Font Awesome 5 Free";
+		}
 
+		@if $style == regular {
+			font-weight: 400;
+		}
+		@else {
+			font-weight: 900;
+		}
+
+		display: inline-block;
+		font-size: 1.25em;
+		text-decoration: none;
+		font-style: normal;
+		line-height: 1;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
 	}
 
+	> .label {
+		display: none;
+	}
 }
 
 /// Applies padding to an element, taking the current element-margin value into account.

_sections/welcome-to-jekyll.md

@@ -6,6 +6,6 @@ order: 5
 
 This Jekyll theme lets you build as many of these sections as you want. They live in the _sections folder in your project's root directory. For some examples, see the [GitHub repository](https://github.com/chrisbobbe/jekyll-theme-prologue). Just be sure to add some [frontmatter](https://jekyllrb.com/docs/frontmatter/) to each section.
 
-All sections have titles, which are listed in the site's navigation menu. At the top of each section, the section's title will render by default (e.g., Welcome to Jekyll!). If you want it to show something different (see Intro), add **auto-header: none** to your frontmatter, and add your text in a <h2> tag inside a <header> tag outside the frontmatter. You'll want to give each section an **order** parameter, also in the frontmatter, or it won't know where to put itself and will hide. Icons are from [Font Awesome](http://fontawesome.io/icons/).
+All sections have titles, which are listed in the site's navigation menu. At the top of each section, the section's title will render by default (e.g., Welcome to Jekyll!). If you want it to show something different (see Intro), add **auto-header: none** to your frontmatter, and add your text in a <h2> tag inside a <header> tag outside the frontmatter. You'll want to give each section an **order** parameter, also in the frontmatter, or it won't know where to put itself and will hide. Icons are from [Font Awesome](https://fontawesome.com/icons).
 
 You may notice that this section is written in Markdown -- either Markdown or html works!