I have followed this guide completely: How to Use Font Awesome 5 in Sage | Roots
No javascript errors, running build, trying to show icon like this: <span class=""><i class="fab fa-bars fa-1x"></i></span> - no icon is shown.
Is there a way just to include it in sage the normal “old” way?
Thanks
Hey @simplenotezy - yes, you should be able to load them the “old way” if you prefer. The guide is just one recommended way of doing it that integrates well with how Sage 9 is set up. 
Go ahead and refer to their docs for other options. You can try starting here:
https://fontawesome.com/start
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Thanks for referencing the docs, however, I have set up font awesome multiple times before.
This is rather a question about how to do it in the sage setup with the asset-manager installed. Eg. copying fonts over etc. I believe the docs could contain a section about the “traditional” way as well, now since the “new” way doesn’t seem to be functioning.
It seems to be a while since I worked with it last
I had to change class “fab” to “far” in the icon class, and then it worked!
Anyways, at least so I thought. It worked great with brand icons, but with Regular icons, I cannot seem to get it working. This is my code:
main.js
// import external dependencies
import ‘jquery’;
// import then needed Font Awesome functionality
import { library, dom } from '@fortawesome/fontawesome-svg-core';
// import the Facebook and Twitter icons
import { faBars } from '@fortawesome/free-regular-svg-icons';
// Import everything from autoload
import './autoload/**/*'
// import local dependencies
import Router from './util/Router';
import common from './routes/common';
import home from './routes/home';
import aboutUs from './routes/about';
// add the imported icons to the library
library.add(faBars);
// tell FontAwesome to watch the DOM and add the SVGs when it detects icon markup
dom.watch();
/** Populate Router instance with DOM routes */
const routes = new Router({
// All pages
common,
// Home page
home,
// About Us page, note the change from about-us to aboutUs.
aboutUs,
});
// Load Events
jQuery(document).ready(() => routes.loadEvents());
My blade file:
No icon is rendered:
Dough! This is a PRO icon I notice…
Glad you got everything sorted out!
