Want to use FontAwesome

Posted In Voyager
  • marty-mickelson 2 years ago
    <p>I'd like to use FontAwesome for icons in my menus. I added</p>
    
    <p>// Here you can specify additional assets you would like to be included in the master.blade
    'additional_css' =&gt; [
        //'css/custom.css',
        'css/font-awesome.min.css'
    ],</p>
    
    <p>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?</p>
  • devdojo 2 years ago
    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.

    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.

  • marty-mickelson 2 years ago
    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. :)

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

  • devdojo 2 years ago
    Great! Glad you got it resolved :)
    
    Thanks for posting your solution.

    Great! Glad you got it resolved :)

    Thanks for posting your solution.

  • daniel-faichnie 1 year ago
    cheers marty solved my issue brillant solve

    cheers marty solved my issue brillant solve

Please login or signup to leave a response.

Login

or Sign Up

Sign Up

or Login
×
Want to create your own SAAS?

I can teach you to create your own Software as a Service. Click here to learn more!

Visit SAAS Adventure!