Fontawesome bullets in WP Menu

Hello people! Need some help. I have looked around.

I’m building a small site and have a WP menu that is used for the main menu and also in the footer template (vertical), styled differently. In the footer I was given a design that uses a right Chevron as the bullet. Pretty much “\f054” from Fontawesome. In order to do this I added custom CSS on the nav menu (attached image Quick Links Code).

But, because it’s a WP menu, it won’t accept the Fontawesome unicode (or whatever it is called). I end up with square outlines as the bullet.

But if I add a Bricks Icon element (Fontawesome chevron “\f054”) in the footer template somewhere (Structure attachment) and set it to display none, then the bullets are chevrons like I want. Just a hack, but it loads the Fontawesome library and changes the bullets.

Because it’s a WP menu and not a Bricks element, do I have to load Fontawesome scripts/css like I would in a static Dreamweaver site in the Bricks settings custom area? Would this cause conflicts with what Bricks is already loading?

I could make the footer menu a custom solution that just uses links with icons that Bricks provides, but I was trying to save some steps if I have to add/delete or modify the menu.

Anyway, I hope I’m just missing something. Probably making it harder than it is.

I should amend that even without the hidden Bricks Icon element the bullets show up as Chevrons in the builder. On the front end they show up as square outlines. My attachment was of the builder.


Hi @Duff ,

I think you have additional \ symbol on the font-family and so the font-awesome css is not enqueued.
Just amend that to font-family: "Font Awesome 6 Solid"; and Bricks will enqueue font-awesome CSS in frontend.

Regards,
Jenn

Hi Jenn,

Sorry for the late reply. Thank you! That did the trick.

I knew it had to be something simple, but sometimes you get tunnel vision. I didn’t even see that was in there.

I feel very silly for missing that, but appreciate you pointing it out. Thank you again!

1 Like