Drop font awesome

gulpfile.js

@@ -58,6 +58,14 @@ gulp.task("pl-copy:favicon", function (done) {
     .on("end", done);
 });
 
+// Iconset font copy
+gulp.task("pl-copy:icons", function (done) {
+  return gulp
+    .src("**/*.*", { cwd: resolvePath(paths().source.iconfont) })
+    .pipe(gulp.dest(resolvePath(paths().public.fonts)))
+    .on("end", done);
+});
+
 // Fonts copy
 gulp.task("pl-copy:font", function (done) {
   return gulp
@@ -125,6 +133,7 @@ gulp.task(
   gulp.parallel(
     "pl-copy:img",
     "pl-copy:favicon",
+    "pl-copy:icons",
     "pl-copy:font",
     "pl-copy:styleguide",
     "pl-copy:styleguide-css",

patternlab-config.json

@@ -11,6 +11,7 @@
       "js" : "./source/js",
       "images" : "./source/images",
       "fonts" : "./source/fonts",
+      "iconfont" : "./source/icons/fonts",
       "css" : "./source/css/"
     },
     "public" : {

source/_data/data.json

@@ -38,7 +38,7 @@
     "long": "Curabitizzle fo shizzle diam quizzle nisi nizzle mollizzle. Suspendisse boofron. Morbi odio. Sure pizzle. Crazy orci. Shut the shizzle up maurizzle get down get down, check out this a, go to hizzle sit amizzle, malesuada izzle, pede. Pellentesque gravida. Vestibulizzle check it out mi, volutpat izzle, shiz sed, shiznit sempizzle, da bomb. Funky fresh in ipsum. Da bomb volutpat felis vizzle daahng dawg. Crizzle quis dope izzle fo shizzle my ni."
   },
   "cta": "Call to action",
-  "icon": "fas fa-skull-crossbones",
+  "icon": "ico--pirati",
   "description": "Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.",
   "url": "http://lorizzle.nl/",
   "person": {

source/_meta/_00-head.mustache

@@ -7,7 +7,6 @@
 
     <link rel="stylesheet" href="../../css/styles.css?{{ cacheBuster }}" media="all" />
     <link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
-    <script src="https://kit.fontawesome.com/cbdc6198f3.js" crossorigin="anonymous"></script>
 
     <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
     {{{ patternLabHead }}}

source/_patterns/01-molecules/00-badge/basic-badge.mustache

@@ -12,7 +12,7 @@
     {{^ hideOccupation }}
       <p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
     {{/ hideOccupation}}
-    {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
-    {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "ico--phone", caption: "+420 777 123 123", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "ico--envelope", classes: "badge__link") }}
   </div>
 </div>

source/_patterns/01-molecules/00-badge/condensed-badge.mustache

@@ -12,7 +12,7 @@
     {{^ hideOccupation }}
       <p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
     {{/ hideOccupation }}
-    {{> atoms-responsive-contact-line(icon: "fas fa-phone", caption: "+420 777 123 123", classes: "badge__link") }}
-    {{> atoms-responsive-contact-line(icon: "fas fa-envelope", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "ico--phone", caption: "+420 777 123 123", classes: "badge__link") }}
+    {{> atoms-responsive-contact-line(icon: "ico--envelope", classes: "badge__link") }}
   </div>
 </div>

source/_patterns/01-molecules/01-social-icon-group/basic-social-icon-group.mustache

 <div class="social-icon-group space-x-2 {{ classes }}">
-  {{> atoms-basic-social-icon(icon: "fab fa-twitter") }}
-  {{> atoms-basic-social-icon(icon: "fas fa-rss") }}
-  {{> atoms-basic-social-icon(icon: "fab fa-instagram") }}
-  {{> atoms-basic-social-icon(icon: "fab fa-flickr") }}
-  {{> atoms-basic-social-icon(icon: "fas fa-envelope") }}
+  {{> atoms-basic-social-icon(icon: "ico--twitter") }}
+  {{> atoms-basic-social-icon(icon: "ico--feed") }}
+  {{> atoms-basic-social-icon(icon: "ico--instagram") }}
+  {{> atoms-basic-social-icon(icon: "ico--flickr") }}
+  {{> atoms-basic-social-icon(icon: "ico--envelope") }}
 </div>

source/_patterns/01-molecules/01-social-icon-group/colored-social-icon-group.mustache

 <div class="social-icon-group space-x-0/5 {{ classes }}">
-  {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white social-icon--5", icon: "fab fa-facebook") }}
-  {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white social-icon--5", icon: "fab fa-twitter") }}
-  {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white social-icon--5", icon: "fab fa-linkedin") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white social-icon--5", icon: "ico--facebook") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white social-icon--5", icon: "ico--twitter") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white social-icon--5", icon: "ico--linkedin") }}
 </div>

source/_patterns/01-molecules/01-social-icon-group/small-colored-social-icon-group.mustache

 <div class="social-icon-group {{ classes }}">
-  {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white text-sm social-icon--4", icon: "fab fa-facebook") }}
-  {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white text-sm social-icon--4", icon: "fab fa-twitter") }}
-  {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white text-sm social-icon--4", icon: "fab fa-linkedin") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-facebook text-white text-sm social-icon--4", icon: "ico--facebook") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-twitter text-white text-sm social-icon--4", icon: "ico--twitter") }}
+  {{> atoms-filled-social-icon(classes: "bg-brands-linkedin text-white text-sm social-icon--4", icon: "ico--linkedin") }}
 </div>

source/_patterns/01-molecules/calendar/calendar-table-row.mustache

@@ -12,7 +12,7 @@
   </div>
   <div class="col-span-2 text-center font-light calendar-table-row__col">
     <a href="#">
-      <i class="fas fa-map-marker-alt text-violet-300 mr-1" aria-hidden="true"></i>
+      <i class="ico--location text-violet-300 mr-1" aria-hidden="true"></i>
       <span>Mapa</span>
     </a>
   </div>

source/_patterns/01-molecules/calendar/calendar.mustache

 <div class="calendar grid grid-cols-4">
   <div class="col-span-4 xl:col-span-1">
-    {{> molecules-banner(color: "bg-orange-300", headClasses: "head-alt-md", cta: "Krajský kalendář", icon: "fas fa-calendar-alt", classes: "h-full") }}
+    {{> molecules-banner(color: "bg-orange-300", headClasses: "head-alt-md", cta: "Krajský kalendář", icon: "ico--calendar", classes: "h-full") }}
   </div>
   <div class="col-span-4 xl:col-span-3">
     {{> molecules-calendar-table-row }}

source/_patterns/01-molecules/pagination/pagination.mustache

 <div class="pagination-container">
-  <nav class="pagination">
-    {{> atoms-icon-button(cta: "Předchozí", icon: "fa fa-chevron-left", classes: "btn--grey-125 btn--hoveractive btn--condensed btn--inverted-icon") }}
-    {{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
-    {{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
+  <nav class="pagination space-x-1">
+    {{> atoms-icon-button(cta: "Předchozí", icon: "ico--chevron-left", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed btn--inverted-icon") }}
+    {{> atoms-basic-button(cta: "1", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
+    {{> atoms-basic-button(cta: "2", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
     {{> atoms-basic-button(cta: "3", classes: "btn--grey-500 btn--condensed hidden md:inline-block") }}
-    {{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
-    {{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--condensed hidden md:inline-block") }}
-    {{> atoms-icon-button(cta: "Další", icon: "fa fa-chevron-right", classes: "btn--grey-125 btn--hoveractive btn--condensed") }}
+    {{> atoms-basic-button(cta: "4", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
+    {{> atoms-basic-button(cta: "5", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed hidden md:inline-block") }}
+    {{> atoms-icon-button(cta: "Další", icon: "ico--chevron-right", classes: "btn--grey-125 btn--hoveractive btn--to-black btn--condensed") }}
   </nav>
 </div>

source/_patterns/01-molecules/sharebox/sharebox.mustache

@@ -3,8 +3,8 @@
     <span class="head-alt-base md:head-alt-md">Sdílení je aktem lásky</span>
 
     <div class="flex w-full space-x-4 pt-4 md:pt-8 text-center text-white">
-      <a href="#" class="bg-brands-facebook px-8 py-3 text-2xl w-full"><i class="fab fa-facebook-f"></i></a>
-      <a href="#" class="bg-brands-twitter px-8 py-3 text-2xl w-full"><i class="fab fa-twitter"></i></a>
+      <a href="#" class="bg-brands-facebook px-8 py-3 text-2xl w-full"><i class="ico--facebook"></i></a>
+      <a href="#" class="bg-brands-twitter px-8 py-3 text-2xl w-full"><i class="ico--twitter"></i></a>
     </div>
   </div>
   <div class="h-52 overflow-hidden hidden md:block">

source/_patterns/01-molecules/subsidiary-card/subsidiary-card.mustache

@@ -5,14 +5,14 @@
       <div>
         <h1 class="head-alt-base mb-2"><a href="#">Svitavy</a></h1>
         <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
-          {{> atoms-responsive-contact-line(icon: "fas fa-envelope", caption: "svitavsko@pirati.cz", classes: "font-light") }}
-          {{> atoms-contact-line(icon: "fab fa-facebook-f text-brands-facebook", caption: "Svitavsko", classes: "font-light") }}
+          {{> atoms-responsive-contact-line(icon: "ico--envelope", caption: "svitavsko@pirati.cz", classes: "font-light") }}
+          {{> atoms-contact-line(icon: "ico--facebook text-brands-facebook", caption: "Svitavsko", classes: "font-light") }}
         </div>
       </div>
       {{> molecules-condensed-badge(hideAvatar: true, hideOccupation: true) }}
     </div>
     <div class="hidden md:block">
-      <a href="#"><i class="fas fa-chevron-right text-3xl"></i></a>
+      <a href="#"><i class="ico--chevron-right text-3xl"></i></a>
     </div>
   </div>
 </article>

source/_patterns/02-organisms/00-global/footer.mustache

@@ -63,11 +63,11 @@
         <section class="footer__social lg:text-right">
           <div class="mb-4">
             {{> molecules-basic-social-icon-group(classes: "text-white pb-4") }}
-            {{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
+            {{> atoms-basic-contact-line(icon: "ico--envelope", caption: "Dejte nám vědět") }}
           </div>
           <div class="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
-            {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
-            {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
+            {{> atoms-icon-button(cta: "Přispěj", icon: "ico--pig", classes: "btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
+            {{> atoms-icon-button(cta: "Naloď se", icon: "ico--anchor", classes: "btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
           </div>
         </section>
       </div>

source/_patterns/02-organisms/00-global/navbar.mustache

@@ -9,15 +9,15 @@
           <span class="lg:hidden pl-4 font-bold text-xl">Pirátská strana</span>
         </div>
         <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
-          <a href="#" @click="show = !show">
-            <img src="/images/menu-toggle.svg" class="w-8" />
+          <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+            <i class="ico--menu text-3xl"></i>
           </a>
         </div>
         <div v-if="show || isLgScreenSize" class="navbar__external navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto lg:flex lg:space-x-8 lg:pb-2">
           <div class="text-grey-200 text-sm lg:space-x-8 leading-loose lg:leading-normal">
-            {{> atoms-basic-contact-line(caption: "pirati.cz", icon: "fas fa-home", classes: "block lg:inline-block") }}
-            {{> atoms-basic-contact-line(caption: "piratskyobchod.cz", icon: "fas fa-shopping-cart", classes: "block lg:inline-block") }}
-            {{> atoms-basic-contact-line(caption: "piratskelisty.cz", icon: "fas fa-newspaper", classes: "block lg:inline-block") }}
+            {{> atoms-basic-contact-line(caption: "pirati.cz", icon: "ico--home", classes: "block lg:inline-block") }}
+            {{> atoms-basic-contact-line(caption: "piratskyobchod.cz", icon: "ico--cart", classes: "block lg:inline-block") }}
+            {{> atoms-basic-contact-line(caption: "piratskelisty.cz", icon: "ico--newspaper", classes: "block lg:inline-block") }}
           </div>
           {{> molecules-basic-social-icon-group(classes: "text-grey-200 py-4 lg:py-0") }}
         </div>
@@ -56,8 +56,8 @@
           </ul>
         </div>
         <div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
-          {{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--cyan-200 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
-          {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--blue-300 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
+          {{> atoms-icon-button(cta: "Přispěj", icon: "ico--pig", classes: "btn--cyan-200 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
+          {{> atoms-icon-button(cta: "Naloď se", icon: "ico--anchor", classes: "btn--blue-300 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base") }}
         </div>
       </div>
     </div>

source/_patterns/02-organisms/00-global/subnav.mustache

@@ -11,7 +11,7 @@
             >
               <div class="btn__body">
                 <span>Pardubický kraj</span>
-                <i class="fas fa-chevron-down ml-4"></i>
+                <i class="ico--chevron-down ml-4"></i>
               </div>
             </button>
 
@@ -21,7 +21,7 @@
               :class="{'btn--activated': isCurrentView('calendar')}"
             >
               <div class="btn__body">
-                <i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2 text-orange-300"></i>
+                <i class="btn__inline-icon ico--calendar mr-0 md:mr-2 text-orange-300"></i>
                 <span class="hidden md:block">Krajský kalendář</span>
               </div>
             </button>
@@ -35,7 +35,7 @@
 
             <button class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-brands-facebook text-sm ml-2">
               <div class="btn__body">
-                <i class="btn__inline-icon fab fa-facebook-f mr-0 md:mr-2 text-brands-facebook"></i>
+                <i class="btn__inline-icon ico--facebook mr-0 md:mr-2 text-brands-facebook"></i>
                 <span class="hidden md:block">Pardubický kraj</span>
               </div>
             </button>
@@ -44,11 +44,11 @@
       </nav>
       <aside class="subnav-aside">
         <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
-          <a @click="toggleView('regions')" class="subnav-aside__close"><i class="fas fa-times"></i></a>
+          <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--close"></i></a>
           <ui-region-map class="container container--default" />
         </div>
         <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
-          <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="fas fa-times"></i></a>
+          <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
           <div class="container container--default">
             {{> molecules-calendar }}
           </div>

source/_patterns/02-organisms/03-hero/hero.mustache

@@ -5,7 +5,7 @@
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
       <div class="mt-4 md:mt-8">
-        {{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "fas fa-chevron-right") }}
+        {{> atoms-icon-button(classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth text-lg", icon: "ico--chevron-right") }}
       </div>
     </div>
     <div class="lg:row-span-5 lg:col-span-4 order-2">

source/_patterns/02-organisms/03-hero/home-hero.mustache

@@ -5,7 +5,7 @@
     </div>
     <div class="lg:row-span-1 lg:col-span-3 order-3">
       <div class="mt-4 md:mt-8 space-y-4">
-        {{> atoms-icon-button(icon: "fas fa-chevron-right", classes: "btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+        {{> atoms-icon-button(icon: "ico--chevron-right", classes: "btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
       </div>
     </div>
     <div class="lg:row-span-3 lg:col-span-4 order-2">

source/_patterns/03-templates/article-detail.mustache

@@ -29,7 +29,7 @@
     <h1 class="head-alt-base md:head-alt-md pb-4">Další podobné články</h1>
     {{> organisms-article-card-list(onlyThree: true) }}
     <div class="text-center mt-8 md:mt-16">
-      {{> atoms-icon-button(cta: "Zobrazit další", classes: "text-xl", icon: "fas fa-chevron-right") }}
+      {{> atoms-icon-button(cta: "Zobrazit další", classes: "text-xl", icon: "ico--chevron-right") }}
     </div>
   </section>