Help needed upgrading to Font Awesome 6 (SOLVED!)

To ensure you get the best experience, this website uses cookies.

Learn More

Help needed upgrading to Font Awesome 6 (SOLVED!)

viewed
1243

edited

posted

besdriscoll

Title

Body

Hi, I've tried to upgrade Font Awesome in a cloudscribe simplecontent site from version 5 to the latest version 6.7.1, but I can't quite get it working and wonder if anyone could help? In Visual Studio I uninstalled the previous fontawesome and installed 6.7.1 using the "Install New npm Packages" tool. I selected just one package and it appears as "@fortawesome/fontawesome-free (6.7.1)" in the list of npm dependencies.  
I cloned my old theme, which was in turn based on the cloudscribe 'custom1' theme, and copied the v6 font-awesome files into \webfonts and \css (I combined some of the fs css files into one and minified as fontawesome_all.min.css, and removed fontawesome version 5 files).  
I also modified {my project}\app-scss\_font-awesome.scss to the following:  

$fa-font-path: "/webfonts";  
@import 'node_modules/@fortawesome/fontawesome-free/scss/functions';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/variables';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/mixins';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/core';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/sizing';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/fixed-width';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/list';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/bordered-pulled';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/animated';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/rotated-flipped';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/stacked';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/icons';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/screen-reader';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/solid';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/regular';  
@import 'node_modules/@fortawesome/fontawesome-free/scss/brands';  

And I altered my gulpfile.js task to build the new theme.  
Parts are working, e.g. I see "font-family: "Font Awesome 6 Free";" (from style.min.css) when I inspect elements, but the icons are not appearing. I'm obviously missing something!

Preview

add a comment

Help needed upgrading to Font Awesome 6 (SOLVED!)

Answers

Tags