PART 1.2.2.2 – Icons

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:

 

_typography_extend.less

//

// Copyright © 2009-2017 Vaimo Group. All rights reserved.

// See LICENSE.txt for license details.

//

  

body {

 .lib-font-face(

    @family-name:’Icomoon’,

    @font-path: ‘@{baseDir}fonts/icomoon/icomoon’,

    @font-weight: @font-weight__light,

    @font-style: normal

 )

}

 

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. 

Remember to add_typography_extend.less  to _extend.less file.

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

_theme.less

//

//  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. 

 

_variables.less

//

//  Icons

//  ———————————————

@icon-fb: ‘\e900’;

@icon-twitter: ‘\e904’;

@icon-yt: ‘\e905’;

<rdf:RDF xmlns:rdf=”http://www.w3.org/1999/02/22-rdf-syntax-ns#&#8221; xmlns:dc=”http://purl.org/dc/elements/1.1/&#8221; xmlns:trackback=”http://madskills.com/public/xml/rss/module/trackback/”&gt; <rdf:Description rdf:about=”https://confluence.vaimo.com/display/CD/PART+1.2.2.2+-+Icons&#8221; dc:identifier=”https://confluence.vaimo.com/display/CD/PART+1.2.2.2+-+Icons&#8221; dc:title=”PART 1.2.2.2 – Icons” trackback:ping=”https://confluence.vaimo.com/rpc/trackback/29884549″/&gt; </rdf:RDF>

Advertisements