How To In Magento 2 – How To Add Custom Icons? Magento 2, Tech & Biz 2 June 20161 Comment Share via: 0 Shares Facebook 0 Twitter LinkedIn Copy Link More This post is part 2 of 10 in the series How To In Magento 2 - TutorialsHow To In Magento 2 - TutorialsHow 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 DesktopHow To In Magento 2 – How To Recognise Shipping And Payment Step In Checkout On FrontendHow To In Magento 2 – How To Display Shipping Details On Shipping Step In CheckoutHow To In Magento 2 – How To Display Total Price Summary On Shipping Step In CheckoutHow To In Magento 2 – How To Add Tabs (Accordion) Only On MobileHow To In Magento 2 – How To Display Additional Text Based On Selected Shipping Methods In The CheckoutHow To In Magento 2 – How To Add Additional Dropdown With Options Based On Selected Shipping Methods In The Checkout 2 MIN READToday we will talk about how to add custom icons into Magento 2 project. 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. If you need any help, book with me 1hr Magento 2 Frontend consultation or learn more about starting work with Magento 2!In order to add custom icons in Magento 2 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! Email By continuing, you confirm that you read and accept the privacy policyContents MORE MAGENTO 2 TUTORIALSJOIN THE GROUP ON FACEBOOK!PIN ME!More In This SeriesMORE MAGENTO 2 TUTORIALSMagento 2 Frontend Developer Interview – Technical TestHow To In Magento 2 – How To Add Additional Dropdown With Options Based On Selected Shipping Methods In The CheckoutJOIN 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!More In This Series← How To In Magento 2 – How To Start?How To In Magento 2 – How To Add Modal PopUp? →Zaneta BaranZaneta 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. FrontendIconsMagento2 Previous Post Next PostYou may also like 17 June 2018 Coding Classes For Kids – Styles Introduction – CSS Selectors & Properties – Basic Tutorial 2 July 2016 Core Principles for Theming in Magento 2 (Instructor-Led) – Review1 Commenthi, you could make a video of this process?ReplyLeave a Reply Cancel replyYour email address will not be published. Required fields are marked *CommentName * Email * Website Save my name, email, and website in this browser for the next time I comment. This site uses Akismet to reduce spam. Learn how your comment data is processed.
17 June 2018 Coding Classes For Kids – Styles Introduction – CSS Selectors & Properties – Basic Tutorial