add fontawesome via npm

Nufflee · Jul 23, 2019 · 378865a · 378865a
1 parent 7267463
commit 378865a
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 44 deletions.
diff --git a/html/index.html b/html/index.html
@@ -4,8 +4,6 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" href="reset.css" type="text/css" media="screen" />
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Cantarell" />
-    <!-- TODO(#47): get fontawesome from npm -->
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
     <link rel="stylesheet" href="main.css" type="text/css" media="screen" />
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.9.0",
     "@types/markdown-it": "0.0.7",
     "@types/moment": "^2.13.0",
     "@types/moment-timezone": "^0.5.6",

diff --git a/scss/main.scss b/scss/main.scss
@@ -6,6 +6,25 @@ $green: #73c936;
 $yellow: #ffdd33;
 $red: #f43841;
 
+// FontAwesome imports
+$fa-font-path: './webfonts';
+@import 'fontawesome';
+@import 'brands';
+@import 'regular';
+@import 'solid';
+
+// Example to add FontAwesome to an existing class
+/*
+.twitch {
+    @extend %fa-icon;
+    @extend .fab;
+
+    &:before {
+        content: fa-content($fa-var-twitch);
+    }
+}
+*/
+
 body {
     background: $background;
     color: $foreground;