Merge pull request #20 from schmanat/fix-brand-fa-icons

fix issue #19 (fab fonts not displayed)

3 files changed, 54 insertions, 26 deletions

diff --git a/README.md b/README.md
index 589dccf..c46ac5f 100644
--- a/README.md
+++ b/README.md
@@ -4,9 +4,9 @@ Highlights is a simple one page site originally created by [HTML5UP](http://html
 All the information for creating the site is stored at the [config.toml](https://raw.githubusercontent.com/schmanat/hugo-highlights-theme/master/exampleSite/config.toml).
 This theme provides the following features
 
-* contact form (via formspree.io)
-* Google Analytics
-* responsive
+- contact form (via formspree.io)
+- Google Analytics
+- responsive
 
 ![Hugo Highlights Theme screenshot](https://raw.githubusercontent.com/schmanat/hugo-highlights-theme/master/images/screenshot.png)
 
@@ -20,26 +20,45 @@ Inside the folder of your Hugo site run:
 For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo.
 
 ## Getting started
+
 After installing the Hugo Highlights Theme it requires a just few more steps to get your site running.
 
 ### The config file
+
 Take a look inside the [`exampleSite`](//github.com/schmanat/hugo-highlights-theme/tree/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](//github.com/schmanat/hugo-highlights-theme/tree/master/exampleSite/config.toml)
 
 ### Change the background images
+
 It's possible to change the background files for every section (about, services, ... ). To do this you could set every image in the [`config.toml`](//github.com/schmanat/hugo-highlights-theme/tree/master/exampleSite/config.toml) of your site. The files are stored at `static/images/`.
 
 ### Present your skills
+
 This section should show your capabilities and skills. You can change this serverics at `[params.services` in the [`config.toml`](//github.com/schmanat/hugo-highlights-theme/tree/master/exampleSite/config.toml).
 
-All icons are part of Fontawesome's icon font. Look at the website of [Fontawesome](//fortawesome.github.io/Font-Awesome/icons/) for more icons. The icons are represented by their corresponding CSS class of Fontawesome. A skill is defined like this example:
+All icons are part of Fontawesome's icon font. Look at the website of [Fontawesome](//fortawesome.github.io/Font-Awesome/icons/) for more icons. The icons are represented by their corresponding CSS class of Fontawesome.
+Since [version 5 of Font Awesome](https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4) the prefix changes, so you have to decide which style you wont to use.
+
+The icontype could be:
+
+- fab (Font Awesome Brands)
+- fas or fa (Font Awesome Solid)
+- far (Font Aweseome Regular)
+- fal (Font Aweseome Light)
+- fad (Font Aweseome Duotone)
+
+far, fal and fad are only available for Pro
+
+A skill is defined like this example:
 
 ```toml
 [[params.services]]
+  icontype = "fas"
   icon = "fa-camera-retro"
   title = "Magna Etiam"
 ```
 
 ### Make the contact form working
+
 Since this page will be static, you can use [formspree.io](//formspree.io/) as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Begin the setup by following the steps below:
 
 1. Enter your email address under 'email' in the [`config.toml`](//github.com/schmanat/hugo-highlights-theme/tree/master/exampleSite/config.toml)
@@ -48,8 +67,8 @@ Since this page will be static, you can use [formspree.io](//formspree.io/) as p
 4. Click the confirm link in the email form www.formspree.io
 5. Thats all. Enjoy mailing!
 
-
 ### Nearly finished
+
 In order to see your site in action, run Hugo's built-in local server.
 
     $ hugo server
@@ -57,6 +76,7 @@ In order to see your site in action, run Hugo's built-in local server.
 Now enter [`localhost:1313`](http://localhost:1313) in the address bar of your browser.
 
 ## Contributing
+
 Did you found a bug or got an idea for features? Feel free to use the [issue tracker](//github.com/schmanat/hugo-highlights-theme/issues) to let me know.
 
 ## License
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 7340af6..3ceea04 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -65,18 +65,22 @@ googleAnalytics = ""
     picture = "pic02.jpg"
 
     [[params.block.item]]
+      icontype = "fas"
       icon = "fa-camera-retro"
       title = "Magna Etiam"
 
     [[params.block.item]]
-      icon = "fa-pencil"
+      icontype = "fas"
+      icon = "fa-pencil-alt"
       title = "Lorem Ipsum"
 
     [[params.block.item]]
+      icontype = "fas"
       icon = "fa-code"
       title = "Nulla Tempus"
 
     [[params.block.item]]
+      icontype = "fas"
       icon = "fa-coffee"
       title = "Sed Feugiat"
 
diff --git a/layouts/partials/list.html b/layouts/partials/list.html
index e64eaef..4f8501f 100644
--- a/layouts/partials/list.html
+++ b/layouts/partials/list.html
@@ -1,25 +1,29 @@
 {{ print "<!-- " .block.id " -->" | safeHTML }}
 <section id="{{.block.id}}" class="main special">
-  <div class="container">
-    {{ if eq .params.backgroundpersection true }}
-      <span class="image fit primary"><img src="images/{{ with .block.picture }}{{ . }}{{ end }}" alt="" /></span>
-    {{ end }}
-    <div class="content">
-      <header class="major">
-        <h2>{{ with .block.title}}{{ . | markdownify }}{{ end }}</h2>
-      </header>
-      <p>{{ with .block.description}}{{ . | markdownify }}{{ end }}</p>
-      <ul class="icons-grid">
-        {{ range .block.item }}
-          <li>
-            <span class="icon major fas {{ .icon }}"></span>
-            <h3>{{ .title }}</h3>
-          </li>
+    <div class="container">
+        {{ if eq .params.backgroundpersection true }}
+        <span class="image fit primary"
+            ><img src="images/{{ with .block.picture }}{{ . }}{{ end }}" alt=""
+        /></span>
+        {{ end }}
+        <div class="content">
+            <header class="major">
+                <h2>{{ with .block.title}}{{ . | markdownify }}{{ end }}</h2>
+            </header>
+            <p>{{ with .block.description}}{{ . | markdownify }}{{ end }}</p>
+            <ul class="icons-grid">
+                {{ range .block.item }}
+                <li>
+                    <span class="icon major {{ .icontype }} {{ .icon }}"></span>
+                    <h3>{{ .title }}</h3>
+                </li>
+                {{ end }}
+            </ul>
+        </div>
+        {{ if .next }}
+        <a href="#{{.next.id}}" class="goto-next scrolly"
+            >{{ with .block.buttontext }}{{ . | markdownify }}{{ end }}</a
+        >
         {{ end }}
-      </ul>
     </div>
-    {{ if .next }}
-      <a href="#{{.next.id}}" class="goto-next scrolly">{{ with .block.buttontext }}{{ . | markdownify }}{{ end }}</a>
-    {{ end }}
-  </div>
 </section>