Tools to Create an Icon Font

Tools to create an Icon Font

Inkscape is a great free application for creating graphics with vectors (what modern fonts are made of).

FontForge is a great free application for creating fonts, and can import SVG (a great free vector graphics format) from Inkscape.

How to maintain an icon font from SVG files

I'd suggest you to use gulp-iconfont or even svgicons2svgfont/svg2ttf/ttf2eot/ttf2woff/ttf2woff2 for pure CLI toolchain, see https://github.com/nfroidure/svgiconfont/blob/master/package.json#L7.

Replace panel tool by awesome font icon

You are on the right track, but the issue is that ExtJS 5 uses the img tag for tool elements, and there's a "minor" issue with :before pseudo elements for img tags. You will have to work around that by appending the original Ext.panel.Tool to use a span instead whenever you need that:

Ext.define('',{
override: 'Ext.panel.Tool',
renderTpl: [
'<tpl if="ui==\'glyph\'">',
'<span id="{id}-toolEl" data-ref="toolEl" src="{blank}" class="{baseCls}-img {baseCls}-{type}' +
'{childElCls}" role="presentation"/>',
'<tpl else>',
'<img id="{id}-toolEl" data-ref="toolEl" src="{blank}" class="{baseCls}-img {baseCls}-{type}' +
'{childElCls}" role="presentation"/>',
'</tpl>'
]
});

Then you can tell some tools to use ui:"glyph", which is used in the override to detect that a div should be used, thus allowing :before pseudo elements and, therefore, a FontAwesome icon:

tools: [{
type: 'edit',
ui:"glyph",
cls:'component-tool-edit',
callback: function() {
alert();
}

and then the icon is technically displayed:

you only have to add FontAwesome to the project and amend your stylesheet:

@font-face {
font-family: 'FontAwesome';
src: url('font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

How to batch create icon webfonts in windows from SVG files

There’s grunt-webfont (you need to use the node engine on Windows).



Related Topics



Leave a reply



Submit