Use @fortawesome/fontawesome-free npm package

The official npm package for Font Awesome Free is now used instead of the vendored styles. Previously we had been using v4.4.0, now we're using v5.13.0. We're now importing the Font Awesome SCSS modules instead of using the minified CSS bundle. This integrates more cleanly into our build system, and it lets us use their mixins directly in the future if we need to. The variable `fa-font-path` has been set to reference our font directory, as instructed here: https://fontawesome.com/how-to-use/on-the-web/using-with/sass#compile
MetaMask · Mar 30, 2020 · db7f4ba · db7f4ba
1 parent 3fb40c9
commit db7f4ba
Show file tree

Hide file tree

Showing 11 changed files with 14 additions and 645 deletions.
diff --git a/app/fonts/Font_Awesome/font-awesome.min.css b/app/fonts/Font_Awesome/font-awesome.min.css
diff --git a/app/fonts/fonts/FontAwesome.otf b/app/fonts/fonts/FontAwesome.otf
diff --git a/app/fonts/fonts/fontawesome-webfont.eot b/app/fonts/fonts/fontawesome-webfont.eot
diff --git a/app/fonts/fonts/fontawesome-webfont.svg b/app/fonts/fonts/fontawesome-webfont.svg
diff --git a/app/fonts/fonts/fontawesome-webfont.ttf b/app/fonts/fonts/fontawesome-webfont.ttf
diff --git a/app/fonts/fonts/fontawesome-webfont.woff b/app/fonts/fonts/fontawesome-webfont.woff
diff --git a/app/fonts/fonts/fontawesome-webfont.woff2 b/app/fonts/fonts/fontawesome-webfont.woff2
diff --git a/development/build/static.js b/development/build/static.js
@@ -29,6 +29,10 @@ const copyTargets = [
     src: `./app/vendor/`,
     dest: `vendor`,
   },
+  {
+    src: `./node_modules/@fortawesome/fontawesome-free/webfonts/`,
+    dest: `fonts/fontawesome`,
+  },
   {
     src: `./ui/app/css/output/`,
     pattern: `*.css`,

diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
     "3box": "^1.10.2",
     "@babel/runtime": "^7.5.5",
     "@download/blockies": "^1.0.3",
+    "@fortawesome/fontawesome-free": "^5.13.0",
     "@material-ui/core": "1.0.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.2.6",
     "@metamask/eth-token-tracker": "^2.0.0",

diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss
@@ -1,4 +1,7 @@
-@import url('./fonts/Font_Awesome/font-awesome.min.css');
+$fa-font-path: 'fonts/fontawesome';
+
+@import '../../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
+@import '../../../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';
 
 @font-face {
   font-family: 'Roboto';

diff --git a/yarn.lock b/yarn.lock
@@ -1347,6 +1347,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@fortawesome/fontawesome-free@^5.13.0":
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz#fcb113d1aca4b471b709e8c9c168674fbd6e06d9"
+  integrity sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg==
+
 "@gulp-sourcemaps/[email protected]":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-1.0.1.tgz#cfa23bc5840f9104ce32a65e74db7e7a974bbee1"