use fontAwesome icon library

3 files changed, 44 insertions, 16 deletions

diff --git a/exampleSite/content/shortcodes/icon/_index.md b/exampleSite/content/shortcodes/icon/_index.md
index b194066..5dad302 100644
--- a/exampleSite/content/shortcodes/icon/_index.md
+++ b/exampleSite/content/shortcodes/icon/_index.md
@@ -3,11 +3,14 @@ title = "icon"
 description = "Display an icon."
 +++
 
-Display an icon like {{% icon cloud %}}
+Display one of the 2 298 icons like 
+{{% icon name="fa-address-card" size="64px" %}}
+{{% icon name="fa-bell" size="32px"%}} 
+{{% icon fa-apple b %}} 
 
 It uses :
 
-* materialize icons library .[more info here](https://material.io/resources/icons/)
+* font-awesome 5 free icons library .[more info here](https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free/)
 
 This `icon` shortcode will display an icon in your page. 
 
@@ -17,20 +20,38 @@ This `icon` shortcode will display an icon in your page.
 |:--|:--|:--|
 | name | **required** | name of icon (see bellow) |
 | size | none | size of icon, medium, xx-small, x-small, small, large, x-large, xx-large, 11px, 2em, 20%.... |
+| style | `fas` | use `fas` for solid or `fab` for brands [see here](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use)|
 
 {{%alert info%}}
 **Tips :**
-setting only the name as argument works too : `{{</*icon film*/>}}` instead of `{{</*icon name="film"*/>}}`
+setting only the name as argument works too : 
+```{{</*icon fa-film*/>}}` instead of `{{</*icon name="fa-film"*/>}}```
+
+Type a `b` letter after the name to use the brand version of FontAwesome
+```{{</*icon fa-facebook b*/>}}` instead of `{{</*icon name="fa-film"*/>}}```
+
+
 {{%/alert%}}
 
 ## Demo
 ```
-	{{</* icon name="save" size="64px" */>}}
+	{{</* icon name="fa-save" size="64px" */>}}
+	{{</* icon name="fa-save" size="32px" */>}}
+	{{</* icon fa-save */>}}
 ```
-{{<icon name="save" size="64px">}}
+{{<icon name="fa-save" size="64px">}}
+{{<icon name="fa-save" size="32px">}}
+{{<icon fa-save>}}
 
-.
+```
+	{{</* icon name="fa-github" style="fab" size="64px" */>}}
+	{{</* icon name="fa-github" style="fab" size="32px" */>}}
+	{{</* icon fa-github b */>}}
+```
+{{<icon name="fa-github" style="fab" size="64px">}}
+{{<icon name="fa-github" style="fab" size="32px">}}
+{{<icon fa-github b>}}
 
 
 ## icons available
-* https://material.io/resources/icons/?icon=attach_file&style=baseline
\ No newline at end of file
+* https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free/
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content b/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content
index f27e0d3..8bca67d 100644
--- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content
+++ b/exampleSite/resources/_gen/assets/scss/sass/main.scss_9fd32d87d247ca96761d3cae485087fe.content
@@ -40,7 +40,6 @@ body:not(.render_raw) {
       body:not(.render_raw) header nav.shortcuts li {
         margin: 0px; }
         body:not(.render_raw) header nav.shortcuts li .fa {
-          font-size: 1.5rem;
           margin-right: 0.5rem; }
         body:not(.render_raw) header nav.shortcuts li a {
           color: #d6d6d6;
@@ -126,6 +125,8 @@ article section.page {
           padding-left: .75rem;
           content: ""; }
   article section.page nav.subpages {
+    flex-wrap: wrap;
+    display: flex;
     margin-right: -1.5rem;
     margin-left: -1.5rem;
     padding-left: 1.5em;
@@ -134,8 +135,7 @@ article section.page {
     overflow-y: auto;
     top: 45px;
     background-color: inherit;
-    flex: 1;
-    display: flex;
+    opacity: 0.85;
     justify-content: flex-start;
     list-style-type: none; }
     article section.page nav.subpages li {
@@ -143,14 +143,15 @@ article section.page {
       overflow: hidden;
       text-overflow: ellipsis;
       margin: 0px;
-      padding-right: .75rem;
+      padding-right: .4rem;
       min-width: 50px; }
       article section.page nav.subpages li a {
         font-size: 90%;
         color: #ad3a3a; }
       article section.page nav.subpages li:not(:first-child):before {
         display: inline-block;
-        padding-right: .75rem;
+        margin-left: 0.4em;
+        padding-right: .4rem;
         color: #965151;
         content: "|"; }
       article section.page nav.subpages li.active {
diff --git a/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content b/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content
index caa7589..ba899fb 100644
--- a/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content
+++ b/exampleSite/resources/_gen/assets/scss/sass/menu.scss_11ec87c0e45b1a85c098a07257dc0c80.content
@@ -25,16 +25,20 @@ article > aside {
     margin-top: 2rem; }
     article > aside .menu ul {
       display: none; }
+    article > aside .menu .ddexp {
+      cursor: pointer; }
     article > aside .menu > .dd-item {
       margin-top: 24px; }
       article > aside .menu > .dd-item > a {
         font-weight: 700;
-        font-size: 16px;
-        color: black; }
+        font-size: 16px; }
       article > aside .menu > .dd-item > i {
+        color: #646464;
         position: absolute;
-        left: 15px;
-        font-size: 2em; }
+        left: 21px;
+        font-size: 1em;
+        font-size: 20px;
+        line-height: inherit; }
     article > aside .menu .dd-item {
       padding: 10px 0px 10px 16px;
       list-style: none; }
@@ -46,6 +50,8 @@ article > aside {
         /*color: rgb(110, 119, 122);*/
         /*color:$color_main;*/
         color: #646464; }
+      article > aside .menu .dd-item > i {
+        color: #646464; }
       article > aside .menu .dd-item ul {
         padding-inline-start: 0px; }
       article > aside .menu .dd-item li {