Want to use FontAwesome

Marty Mickelson Visit User Profile
marty-mickelson ・

Jun 2nd, 2017 07:58 PM

I'd like to use FontAwesome for icons in my menus. I added

// Here you can specify additional assets you would like to be included in the master.blade 'additional_css' => [ //'css/custom.css', 'css/font-awesome.min.css' ],

with the font-awesome.min.css in my public/css folder. In the menu builder, I specified fa-cubes as the Font Icon Class for the menu item but I just get a square like it's not recognized. Are there other modifications I need to make?

Report
DigitalOcean Laravel News Genesis
devdojo ・

Jun 5th, 2017 11:14 PM

Did you make sure to include the font files as well. Typically when you include font-awesome, they have a link to the font files themselves.

Do you have any console errors when visit the pages? Let me know :)

Thanks.

Report
marty-mickelson ・

Jun 6th, 2017 11:16 PM

Ok, thanks for the response. It led me to experiment with some things and eventually figure it out. For others who may have a similar question... There are 2 ways to include font awesome.

  1. Use their CDN. They provide a link to a js file and you can put that in the config/voyager.php in the "additional_js" at the bottom.
  2. Download it. Put the font-awesome.min.js in your public/css directory. Put the "fonts" folder provided in the font awesome download next to the "css" folder so you'll have public/fonts.

Then, in the admin UI, use "fa fa-xxxx" for the icon class instead of the voyager class. For example, in the "Font icon class for the menu item" field of the menu editor, I have "fa fa-cube". The main part that I overlooked was that I needed to include the "fa" as well as the "fa-cubes" identifier.

Thanks for your help. I hope this saves someone else a little time. :)

Report
devdojo ・

Jun 7th, 2017 11:51 AM

Great! Glad you got it resolved :)

Thanks for posting your solution.

Report
daniel-faichnie ・

Mar 21st, 2018 10:24 PM

cheers marty solved my issue brillant solve

Report