Remove font-awesome and migrate its icons

layouts/_default/single.html

@@ -36,7 +36,7 @@
     {{ if .Site.Params.GitRepo }}
       <div class="btn-improve-page">
           <a href="{{ .Site.Params.GitRepo }}/edit/source/content/{{ .File.Path }}">
-            <i class="fas fa-code-branch"></i>
+            <i class="icon-fork"></i>
             Improve This Page
           </a>
       </div>

layouts/partials/header.html

@@ -12,9 +12,7 @@
 
 <!--=================== cdn ==============================-->
 <link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/brands.min.css" />
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.min.css" />
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.min.css" />
+<link rel="stylesheet" href="/assets/css/fontello.css" />
 
 <!--================= fab-icon =========================-->
 <link rel="icon" type="image/png" href="/assets/images/logo-inverted.png" />

layouts/partials/home.html

@@ -27,7 +27,7 @@
     </ul>
     {{ if .Site.Data.sections }}
       {{ range first 1 (where (sort .Site.Data.sections "section.weight") ".section.enable" true) }}
-        <a href="#{{ replace (lower .section.name) " " "-" }}"><i class="arrow bounce fa fa-chevron-down"></i></a>
+        <a href="#{{ replace (lower .section.name) " " "-" }}"><i class="arrow bounce icon-down-open"></i></a>
       {{ end }}
     {{ end }}
   </div>

layouts/partials/next-prev-navigator.html

@@ -6,7 +6,7 @@
       {{ if (in site.Params.mainSections .Next.Type) }}
       <div class="col-md-6 previous-article">
         <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info">
-          <span><i class="fas fa-chevron-circle-left"></i> Prev</span>
+          <span><i class="icon-angle-circled-left"></i> Prev</span>
           <br />
           <span>{{ .Next.Title }}</span>
         </a>
@@ -23,7 +23,7 @@
         {{ end}}
         <div class="{{ $columnWidth }} next-article">
           <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info">
-            <span>Next <i class="fas fa-chevron-circle-right"></i></span>
+            <span>Next <i class="icon-angle-circled-right"></i></span>
             <br />
             <span>{{ .Prev.Title }}</span>
           </a>

layouts/partials/scripts.html

@@ -8,5 +8,5 @@
     crossorigin="anonymous"></script>
 
 <script src="/assets/js/navbar.js"></script>
-<script async src="https://cdnjs.cloudflare.com/ajax/libs/filterizr/2.2.4/vanilla.filterizr.min.js" ></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/filterizr/2.2.4/jquery.filterizr.min.js" ></script>
 

static/assets/css/about.css

@@ -6,7 +6,7 @@
 .social-link a {
   font-size: 1.5rem;
   color: #3c4858;
-  padding: 0.5rem;
+  padding: 0.25rem;
 }
 
 .social-link a:hover {

static/assets/css/fontello.css

@@ -0,0 +1,69 @@
+@font-face {
+    font-family: 'fontello';
+    src: url('../font/fontello.eot?91505657');
+    src: url('../font/fontello.eot?91505657#iefix') format('embedded-opentype'),
+         url('../font/fontello.woff2?91505657') format('woff2'),
+         url('../font/fontello.woff?91505657') format('woff'),
+         url('../font/fontello.ttf?91505657') format('truetype'),
+         url('../font/fontello.svg?91505657#fontello') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+  /*
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    @font-face {
+      font-family: 'fontello';
+      src: url('../font/fontello.svg?91505657#fontello') format('svg');
+    }
+  }
+  */
+   
+   [class^="icon-"]:before, [class*=" icon-"]:before {
+    font-family: "fontello";
+    font-style: normal;
+    font-weight: normal;
+    speak: never;
+   
+    display: inline-block;
+    text-decoration: inherit;
+    width: 1em;
+    margin-right: .2em;
+    text-align: center;
+    /* opacity: .8; */
+   
+    /* For safety - reset parent styles, that can break glyph codes*/
+    font-variant: normal;
+    text-transform: none;
+   
+    /* fix buttons height, for twitter bootstrap */
+    line-height: 1em;
+   
+    /* Animation center compensation - margins should be symmetric */
+    /* remove if not needed */
+    /* margin-left: .2em; */
+   
+    /* you can be more comfortable with increased icons size */
+    /* font-size: 120%; */
+   
+    /* Font smoothing. That was taken from TWBS */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+   
+    /* Uncomment for 3D effect */
+    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+  }
+   
+  .icon-down-open:before { content: '\e800'; } /* '' */
+  .icon-search:before { content: '\e801'; } /* '' */
+  .icon-minus-circled:before { content: '\e802'; } /* '' */
+  .icon-plus-circled:before { content: '\e803'; } /* '' */
+  .icon-link:before { content: '\e804'; } /* '' */
+  .icon-twitter:before { content: '\f099'; } /* '' */
+  .icon-github-circled:before { content: '\f09b'; } /* '' */
+  .icon-fork:before { content: '\f126'; } /* '' */
+  .icon-angle-circled-left:before { content: '\f137'; } /* '' */
+  .icon-angle-circled-right:before { content: '\f138'; } /* '' */
+  .icon-stackoverflow:before { content: '\f16c'; } /* '' */
+  .icon-linkedin-squared:before { content: '\f30c'; } /* '' */

static/assets/css/home.css

@@ -49,7 +49,7 @@
 .arrow {
   position: absolute;
   color: #f9fafc;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   bottom: 0;
 }
 

static/assets/css/style.css

@@ -216,6 +216,25 @@ img.right{
   width: 32px;
 }
 
+.chevron::before {
+	border-style: solid;
+	border-width: 0.25em 0.25em 0 0;
+	content: '';
+	display: inline-block;
+	height: 0.45em;
+	left: 0.15em;
+	position: relative;
+	top: 0.15em;
+	transform: rotate(-45deg);
+	vertical-align: top;
+	width: 0.45em;
+}
+
+.chevron.bottom:before {
+	top: 0;
+	transform: rotate(135deg);
+}
+
 /* --- FOOTER END ---- */
 
 /* ============= Device specific fixes ======= */

static/assets/font/fontello.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2020 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="down-open" unicode="&#xe800;" d="M939 399l-414-413q-10-11-25-11t-25 11l-414 413q-11 11-11 26t11 25l93 92q10 11 25 11t25-11l296-296 296 296q11 11 25 11t26-11l92-92q11-11 11-25t-11-26z" horiz-adv-x="1000" />
+
+<glyph glyph-name="search" unicode="&#xe801;" d="M643 386q0 103-73 176t-177 74-177-74-73-176 73-177 177-73 177 73 73 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 153-31 125-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="minus-circled" unicode="&#xe802;" d="M679 314v72q0 14-11 25t-25 10h-429q-14 0-25-10t-10-25v-72q0-14 10-25t25-10h429q14 0 25 10t11 25z m178 36q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="plus-circled" unicode="&#xe803;" d="M679 314v72q0 14-11 25t-25 10h-143v143q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-143h-143q-14 0-25-10t-10-25v-72q0-14 10-25t25-10h143v-143q0-15 11-25t25-11h71q15 0 25 11t11 25v143h143q14 0 25 10t11 25z m178 36q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="link" unicode="&#xe804;" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="twitter" unicode="&#xf099;" d="M904 622q-37-54-90-93 0-8 0-23 0-73-21-145t-64-139-103-117-144-82-181-30q-151 0-276 81 19-2 43-2 126 0 224 77-59 1-105 36t-64 89q19-3 34-3 24 0 48 6-63 13-104 62t-41 115v2q38-21 82-23-37 25-59 64t-22 86q0 49 25 91 68-83 164-133t208-55q-5 21-5 41 0 75 53 127t127 53q79 0 132-57 61 12 115 44-21-64-80-100 52 6 104 28z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="github-circled" unicode="&#xf09b;" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="fork" unicode="&#xf126;" d="M161 29q0 22-16 38t-38 15-38-15-15-38 15-38 38-16 38 16 16 38z m0 642q0 23-16 38t-38 16-38-16-15-38 15-37 38-16 38 16 16 37z m357-71q0 22-16 38t-38 16-38-16-15-38 15-38 38-16 38 16 16 38z m53 0q0-29-14-54t-39-39q-1-160-126-231-38-21-113-45-72-22-95-39t-23-56v-15q24-14 39-39t14-53q0-45-31-76t-76-32-76 32-31 76q0 29 15 53t39 39v458q-25 14-39 39t-15 53q0 45 31 76t76 32 76-32 31-76q0-29-14-53t-39-39v-277q30 14 86 31 30 10 49 17t39 17 33 22 22 29 16 38 5 51q-25 14-39 39t-15 54q0 45 31 76t76 31 76-31 31-76z" horiz-adv-x="571.4" />
+
+<glyph glyph-name="angle-circled-left" unicode="&#xf137;" d="M507 72l57 57q11 10 11 25t-11 25l-171 171 171 171q11 11 11 25t-11 26l-57 57q-10 10-25 10t-25-10l-253-254q-11-10-11-25t11-25l253-253q11-11 25-11t25 11z m350 278q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="angle-circled-right" unicode="&#xf138;" d="M400 72l254 253q10 11 10 25t-10 25l-254 254q-10 10-25 10t-25-10l-57-57q-11-11-11-26t11-25l171-171-171-171q-11-11-11-25t11-25l57-57q11-11 25-11t25 11z m457 278q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="stackoverflow" unicode="&#xf16c;" d="M719-61h-624v268h-89v-357h803v357h-90v-268z m-525 293l18 87 437-92-18-87z m57 208l38 82 404-189-37-81z m112 199l57 69 343-287-57-68z m222 211l266-358-71-53-267 357z m-401-821v89h447v-89h-447z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="linkedin-squared" unicode="&#xf30c;" d="M132 61h129v387h-129v-387z m138 507q-1 29-21 48t-51 19-53-19-21-48q0-29 20-48t52-19h0q33 0 53 19t21 48z m326-507h129v222q0 86-41 130t-107 44q-76 0-117-65h1v56h-129q2-37 0-387h129v217q0 21 4 31 8 19 25 33t41 14q65 0 65-88v-207z m261 557v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" />
+</font>
+</defs>
+</svg>

static/assets/js/list.js

@@ -45,8 +45,8 @@ var isMobile = false, isTablet = false, isLaptop = false;
 
     // ============= Sidebar Tree ================
     function buildSidebarMenu() {
-      var openedClass = "fa-minus-circle";
-      var closedClass = "fa-plus-circle";
+      var openedClass = "icon-minus-circled";
+      var closedClass = "icon-plus-circled";
       // initialize top level
       var tree = $("#tree");
       // add expand icon to those li who has ul as children

static/assets/js/single.js

@@ -22,7 +22,7 @@ var isMobile = false, isTablet = false, isLaptop = false;
 
     // =========== Add anchor to the headers ================
     function addAnchor(element) {
-      element.innerHTML = `<a href="#${element.id}" class="header-anchor">${element.innerHTML}<sup><i class="fas fa-link"></i></sup></a>`;
+      element.innerHTML = `<a href="#${element.id}" class="header-anchor">${element.innerHTML}<sup><i class="icon-link"></i></sup></a>`;
     }
 
     var postContent = document.getElementById("post-content");