How To In Magento 2

• How To In Magento 2 – How To Start?
• How To In Magento 2 – How To Add Custom Icons?
• How To In Magento 2 – How To Add Modal PopUp?
• How To In Magento 2 – How To Move Checkout Buttons To Order Summary Only On Desktop
• How To In Magento 2 – How To Recognise Shipping And Payment Step In Checkout On Frontend
• How To In Magento 2 – How To Display Shipping Details On Shipping Step In Checkout
• How To In Magento 2 – How To Display Total Price Summary On Shipping Step In Checkout
• How To In Magento 2 – How To Add Tabs (Accordion) Only On Mobile

Today we will talk about icons and one of the possibility of adding them. I have noticed it is one of the most popular topic lately. Let me just show you how to add your own custom icons in easy and fast way. First of all check out this Magento documentation about fonts.

In order to add icons I would recommend to use IcoMoon. Add icons as font rather than images. In order to generate font, you will need to have icons in svg fill format. Please, see the documentation how to convert strokes to fill. The next step is to upload and select icons, generate font and add to the project app/design/frontend/<Vendor>/<theme>/web/fonts/

Notice, that you will need to generate woff2 version as it is not included in IcoMoon zip, use some online convertors.

The next step is to create _typography_extend.less file with following content:

body { 
  .lib-font-face( 
    @family-name:'Icomoon', 
    @font-path: '@{baseDir}fonts/icomoon/icomoon', 
    @font-weight: @font-weight__light, 
    @font-style: normal 
  ) 
}

Remember to add_typography_extend.less  to _extend.less file. See my last post How In Magento2 – How To Start?

Notice, that @font-weight__light is already defined. fonts/icomoon is directory where you can find font files named icomoon.xxx in different formats. All font files should have the same name.

As Magento2 has already icons as font, you will need to overwrite current icon font in _theme.less by adding following lines:

//
//  Icons
//  ---------------------------------------------

@icons__font-path: "@{baseDir}fonts/icomoon/icomoon";
@icons__font-name: 'icomoon';
@icon-font__size: 2.2rem;

Notice that all new icons variables should be defined in _variables.less file. For example:

//
//  Icons
//  ---------------------------------------------

@icon-fb: '\e900';
@icon-twitter: '\e904';
@icon-yt: '\e905';
@icon-pinterest: '\e902';

SUBSCRIBE TO MAGENTO 2 NEWSLETTER!

Would you like to get information when new Magento tutorial is available?
Subscribe to the newsletter and be up to date!

MORE MAGENTO 2 TUTORIALS

Magento 2 Front End Professional Certification – Feedback & Questions Examples

How To In Magento 2 – How To Add Tabs (Accordion) Only On Mobile

JOIN THE GROUP ON FACEBOOK!

PIN ME!

I hope it can help with your journey with M2! Also feel free to give your feedback and advices. Did you find this post useful? I would be more than happy if you share it with your friends, maybe someone else will find it useful as well. Good luck!

Zaneta Baran

Zaneta loves challenges so deciding about career path she has chosen typical male industry. Woman who codes. Every 1-2 years she lives in different part of the world. Gym dates is something what she specialised in. Healthy lifestyle, extreme sports and motorbikes have stolen her hear years ago.