Search code examples
htmlcssicon-fonts

Font icon ligatures

I made my font icon set with fontello. At the moment it works like this:

<div class="icons_class home" ng-click="toHome()"></div>

and the CSS of the corresponding class is:

.icons_class {
   font-family: 'myFont';
   ...
   ...
}
.home:before {
   content: '/e822';
}

but I want to use like this:

<div class="icons_class" ng-click="toHome()">home</div>

like material icon.

Is it possible? Do I have to use ligatures for this purpose?

Solution

  • I did it.

    Instead of fontello.com I must use icomoon.io, where there is a specific feature for ligatures:

    Ligatures

    To enable/disable ligatures, press the fi button in the font tab of the app. By enabling ligatures, you will be able to assign words/tags to each glyph. (use comma to assign multiple words to each glyph.)

    If the platform in which you use your font supports ligatures, typing the words you assign to each glyph would bring up that glyph. Ligatures are not supported in IE 9 and older, but the IcoMoon app provides a javascript polyfill for you. IE 10 and other modern browsers support ligatures.