Roots Discourse

Font awesome icon doesnt seem to work

I have followed this guide completely: https://roots.io/guides/how-to-use-font-awesome-5-in-sage/

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. :wink: 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 :wink:

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!