Font Awesome in Magento

Font Awesome is awesome. I am sure you have read that before.
But it’s true. It’s well made and super simple to use. Here are
some links that can help you.

If you have questions about Font Awesome and Magento, please
ask us.

  1. Paste the following code into
    the <head> section of your
    Magento. The head.phtml. Or if you do not have FTP knowledge
    you can go to System > Configuration > Design > HTML
    head > Miscellaneous Scripts and add the below
    code there.

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

     Immediately after release, it takes a bit of time for
    BootstrapCDN to catch up and get the newest version live on
    their CDN.

  2. Pat yourself on the back for you are done.
  3. Check out the examples to start using Font Awesome!
  4. So now you go to a cms page and add for example this
    code;
    <i class="fa fa-camera-retro
    fa-lg"    ></i>
    And you will see;

 

To increase icon sizes relative to their container, use
the fa-lg (33%
increase), fa-2x, fa-3x, fa-4x,
or fa-5x classes. 

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

  • If your icons are getting chopped off on top and bottom,
    make sure you have sufficient line-height.

Submit a Comment