chore: use icons by font

_includes/contact.html

@@ -108,7 +108,7 @@
 
   {%- if contact.threema %}
   <div class="contact-item" title="threema">
-    <i class="icon threema"></i>
+    <i class="icon icon-threema"></i>
     <a href="https://threema.id/R/{{ contact.threema }}" target="_blank">{{ contact.threema }}</a>
   </div>
   {%- endif %}
@@ -143,21 +143,21 @@
 
   {%- if contact.leetcode %}
   <div class="contact-item" title="leetcode">
-    <i class="icon leetcode"></i>
+    <i class="icon icon-leetcode"></i>
     <a href="https://leetcode.com/{{ contact.leetcode }}" target="_blank">{{ contact.leetcode }}</a>
   </div>
   {%- endif %}
 
   {%- if contact.codeforces %}
   <div class="contact-item" title="codeforces">
-    <i class="icon codeforces"></i>
+    <i class="icon icon-codeforces"></i>
     <a href="https://codeforces.com/profile/{{ contact.codeforces }}" target="_blank">{{ contact.codeforces }}</a>
   </div>
   {%- endif %}
 
   {%- if contact.codewars %}
   <div class="contact-item" title="codewars">
-    <i class="icon codewars"></i>
+    <i class="icon icon-codewars"></i>
     <a href="https://www.codewars.com/users/{{ contact.codewars }}" target="_blank">{{ contact.codewars }}</a>
   </div>
   {%- endif %}
@@ -171,14 +171,14 @@
 
   {%- if contact.tryhackme %}
   <div class="contact-item" title="tryhackme">
-    <i class="icon tryhackme"></i>
+    <i class="icon icon-tryhackme"></i>
     <a href="https://tryhackme.com/p/{{ contact.tryhackme }}" target="_blank">{{ contact.tryhackme }}</a>
   </div>
   {%- endif %}
 
   {%- if contact.googlescholar %}
   <div class="contact-item" title="google scholar">
-    <i class="icon googlescholar"></i>
+    <i class="icon icon-googlescholar"></i>
     <a href="https://scholar.google.com/citations?user={{ contact.googlescholar }}" target="_blank">{{ contact.googlescholar }}</a>
   </div>
   {%- endif %}
@@ -206,7 +206,7 @@
 
   {%- if contact.figshare %}
   <div class="contact-item" title="figshare">
-    <i class="icon figshare"></i>
+    <i class="icon icon-figshare"></i>
     <a href="https://figshare.com/authors/{{ contact.figshare }}" target="_blank">{{ contact.figshare }}</a>
   </div>
   {%- endif %}
@@ -283,7 +283,7 @@
 
   {%- if contact.indeed %}
   <div class="contact-item" title="indeed">
-    <i class="icon indeed"></i>
+    <i class="icon icon-indeed"></i>
     <a href="https://my.indeed.com/p/{{ contact.indeed }}" target="_blank">{{ contact.indeed }}</a>
   </div>
   {%- endif %}
@@ -297,14 +297,14 @@
 
   {%- if contact.fiverr %}
   <div class="contact-item" title="fiverr">
-    <i class="icon fiverr"></i>
+    <i class="icon icon-fiverr"></i>
     <a href="https://www.fiverr.com/{{ contact.fiverr }}" target="_blank">{{ contact.fiverr }}</a>
   </div>
   {%- endif %}
 
   {%- if contact.freelancer %}
   <div class="contact-item" title="freelancer">
-    <i class="icon freelancer"></i>
+    <i class="icon icon-freelancer"></i>
     <a href="https://www.freelancer.com/u/{{ contact.freelancer }}" target="_blank">{{ contact.freelancer }}</a>
   </div>
   {%- endif %}

_includes/head.html

@@ -10,6 +10,7 @@
 {%- endif %}
 
 <link rel="stylesheet" href="{{ "/assets/fontawesome/css/all.min.css" | relative_url }}">
+<link rel="stylesheet" href="{{ "/assets/icons/css/all.css" | relative_url }}">
 <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
 
 {%- if site.analytics.google %}

_sass/_base.scss

@@ -80,6 +80,7 @@ small {
 
       i::after {
         content: "\00a0";
+        font-family: initial;
       }
 
       h2 {
@@ -120,6 +121,7 @@ small {
 
         i::after {
           content: "\00a0";
+          font-family: initial;
         }
       }
 
@@ -130,6 +132,7 @@ small {
 
         small::before {
           content: "\00a0";
+          font-family: initial;
         }
       }
 
@@ -206,6 +209,7 @@ small {
 
           i::after {
             content: "\00a0";
+            font-family: initial;
           }
         }
       }
@@ -242,6 +246,7 @@ small {
 
           .skill-name::after {
             content: "\00a0\00a0";
+            font-family: initial;
           }
 
           .skill-level {
@@ -250,6 +255,7 @@ small {
 
             i:not(:last-child)::after {
               content: "\00a0";
+              font-family: initial;
             }
           }
         }
@@ -307,6 +313,7 @@ small {
 
           small::before {
             content: "\00a0";
+            font-family: initial;
           }
         }
       }

assets/css/main.scss

@@ -35,7 +35,6 @@ $contact-delimiter: "{{ site.contact_delimiter | default: "·" }}";
 @import
   "sanitize",
   "base",
-  "icon",
   "responsive",
   "print"
 ;

assets/icons/css/all.css

@@ -0,0 +1,64 @@
+@font-face {
+  font-family: "Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+  src: url("../webfonts/icons.woff2") format("woff2"), url("../webfonts/icons.ttf") format("truetype");
+}
+
+.icon {
+  font-family: "Icons" !important;
+  display: inline-block;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  text-rendering: auto;
+  vertical-align: -.125em;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.icon-protonmail:before {
+  content: "\e900";
+}
+.icon-signal:before {
+  content: "\e901";
+}
+.icon-topcoder:before {
+  content: "\e902";
+}
+.icon-wire:before {
+  content: "\e903";
+}
+.icon-tryhackme:before {
+  content: "\e904";
+}
+.icon-threema:before {
+  content: "\e905";
+}
+.icon-leetcode:before {
+  content: "\e906";
+}
+.icon-indeed:before {
+  content: "\e907";
+}
+.icon-googlescholar:before {
+  content: "\e908";
+}
+.icon-freelancer:before {
+  content: "\e909";
+}
+.icon-fiverr:before {
+  content: "\e90a";
+}
+.icon-figshare:before {
+  content: "\e90b";
+}
+.icon-codewars:before {
+  content: "\e90c";
+}
+.icon-codeforces:before {
+  content: "\e90d";
+}