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
How to Detect CSS Inheritance Source
What's The Point of Gutters in CSS Grid Frameworks
CSS Background-Position Animate Right to Left
Angular2 Get Window Width Onresize
How to Use SASS to Properly Avoid Embedding Twitter Bootstrap Class Names on HTML
Styling: :-Webkit-Scrollbar-Track Not Working
Relation Between Dp - Sp and Px
CSS Stylesheets at Top or Bottom? or How to Solve Blank Page Issue
Vertical Alignment Based on X-Height
Wordpress Will Only Fully Load on Localhost
Why Is Transition on 'Margin' and 'Padding' Laggy in Webkit Browsers
Float a Div in Top Right Corner Without Overlapping Sibling Header
How to Move Bootstrap 3 Carousel Caption Below Images
Slide Out Panel with Bootstrap
Why Can't an <Ul> (With Absolute Position) Inside a <Li> (With Relative Position) Auto Size