Add custom Icons to Ionic Framework on Intel XDK - ionic-framework

Question

Please, looking for a tutorial or explanation that can guide me how to add custom icons to ionic framework. Tried a lot to use custom icons however couldn't understand how the framework make use of the icons in order to use them.

Answer 1

You can add your own icons including custom fonts in your project generated from sites like Icomoon, Fontello or similar.
From these sites you can download a pack with font files (ttf, svg, ...) and relating CSS file. Generally they provide also a demo.html.
It's often necessary to customize the CSS in order to avoid overlapping to Ionicons. For example a CSS could be similar to the following:
#font-face {
font-family: 'myicons';
src:url('../fonts/myicons.eot');
src:url('../fonts/myicons.eot') format('embedded-opentype'),
url('../fonts/myicons.ttf') format('truetype'),
url('../fonts/myicons.woff') format('woff'),
url('../fonts/myicons.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.icon-camera:before {
font-family: 'myicons';
content: "\e607";
}
.icon-video-camera:before {
font-family: 'myicons';
content: "\e608";
}
.icon-price-tag:before {
font-family: 'myicons';
content: "\e609";
}