From 5abbab644dc6a14c550d024a2206ee314686f9fe Mon Sep 17 00:00:00 2001 From: evazion Date: Tue, 22 Oct 2019 16:20:53 -0500 Subject: [PATCH] font awesome: switch from svg+js to webfonts. https://fontawesome.com/how-to-use/on-the-web/other-topics/performance The default version of Font Awesome uses Javascript to replace tags with dynamically generated SVG elements. This adds a lot of weight to the Javascript bundle (at least 1MB+), even when using subsetting to load only the icons we actually use. The web font version is less featureful than the JS version, but much lighter weight. --- app/javascript/packs/application.js | 5 +++-- app/javascript/src/styles/base/000_vars.scss | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 17ef6bfbc..f9e1a5ee1 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -25,8 +25,9 @@ require("jquery-ui/themes/base/draggable.css"); require("jquery-ui/themes/base/resizable.css"); require("jquery-ui/themes/base/theme.css"); -require("@fortawesome/fontawesome-free/css/all.css"); -require("@fortawesome/fontawesome-free/js/all.js"); +require("@fortawesome/fontawesome-free/css/fontawesome.css"); +require("@fortawesome/fontawesome-free/css/solid.css"); +require("@fortawesome/fontawesome-free/css/regular.css"); importAll(require.context('../src/javascripts', true, /\.js(\.erb)?$/)); importAll(require.context('../src/styles', true, /\.s?css(?:\.erb)?$/)); diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss index cb1e5ca73..28587cd05 100644 --- a/app/javascript/src/styles/base/000_vars.scss +++ b/app/javascript/src/styles/base/000_vars.scss @@ -44,7 +44,7 @@ $base_font_family: Verdana, Helvetica, sans-serif; text-rendering: auto; -webkit-font-smoothing: antialiased; - font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro"; + font-family: "Font Awesome 5 Free"; font-weight: 900; content: $content; }