SOLVED: FontAwesome not intializing if there are none on the page

Bugs
1

Bricks Version: 1.3.7
Browser: Chrome
OS: macOS
URL: Local

I’ve made a couple of custom elements that render some Font Awesome icons using

< i class=“fas fa-< icon>”></ i>

However, when I have no icons on the page using the Icon element, the FA Icons won’t load and return a 404 error in the console.

A work-around I’ve found is by using display: none on a icon in the header, but this isn’t ideal.

Thanks.

2

Hi Menno,

the icon styles are only loaded if you place an icon or use an icon in a bricks element. This keeps the styles as low as possible. If you want to use an icon in custom code, you need to include the styles manually.

On every page: bricks » settings » custom code » header scripts
Single Page / Post: settings (the little gear icon on the top left) » page settings » custom code » header scripts

<link rel="stylesheet" id="bricks-font-awesome-css" href="https://yourdomain.com/wp-content/themes/bricks/assets/css/libs/font-awesome.min.css" media="all">

Best regards,
timmse

2 Likes
3

That’s pretty smart. Thanks for the explanation.

4

Hi - this really helped me - are the header scripts for the other icon libraries published anywhere?

5

Hey, no. But you can simply insert one icon and copy the link tag when inspecting the styles :slight_smile:

6

Brilliant - Thanks… I should have thought of that!

7

This is helpful, thanks. However on this page of the Bricks Academy Asset Loading Optimization – Bricks Academy it shows how to enqueue the font awesome library if it needs to be loaded manually. This isn’t working though. I looked thru the Bricks code and the call should actually look like this: wp_enqueue_style( ‘bricks-font-awesome-6’ ); but it still doesn’t work (I tried with the -6 and without the -6).

I’d just rather use the Bricks function than hard-code using if possible. Any idea why the Bricks recommended enqueue isn’t working?

Thanks

8

@rhkittredge The font icon styles are currently not registered, so the enqueue doesn’t have any effect. We’ll fix this next. In the meantime you can enqueue the icon font styles like this:

wp_enqueue_style( 'bricks-font-awesome-6', BRICKS_URL_ASSETS . 'css/libs/font-awesome-6.min.css', [ 'bricks-frontend' ], filemtime( BRICKS_PATH_ASSETS . 'css/libs/font-awesome-6.min.css' ) );
wp_enqueue_style( 'bricks-font-awesome-6-brands', BRICKS_URL_ASSETS . 'css/libs/font-awesome-6-brands.min.css', [ 'bricks-frontend' ], filemtime( BRICKS_PATH_ASSETS . 'css/libs/font-awesome-6-brands.min.css' ) );
wp_enqueue_style( 'bricks-ionicons', BRICKS_URL_ASSETS . 'css/libs/ionicons.min.css', [ 'bricks-frontend' ], filemtime( BRICKS_PATH_ASSETS . 'css/libs/ionicons.min.css' ) );
wp_enqueue_style( 'bricks-themify-icons', BRICKS_URL_ASSETS . 'css/libs/themify-icons.min.css', [ 'bricks-frontend' ], filemtime( BRICKS_PATH_ASSETS . 'css/libs/themify-icons.min.css' ) );
9

That worked perfectly, thanks Thomas.

1 Like
10

Hi guys,

We’ve fixed this issue in Bricks 1.9.7(.1), now available as a one-click update in your WordPress Dashboard.

Please take your time and read the changelog carefully as Bricks 1.9.7(.1) contains breaking changes that will make your Bricks website more secure.

Changelog: Bricks 1.9.7 Changelog – Bricks

Please let us know if you are still experiencing issues.