SenchaTouch如何用字体icon font图标字库

最近在研究icon font图标字库，觉得很有意思，于是找了一些比较好的在线字库。大都是开源的，而且各有特色，推荐给大家！


阿里icon font字库


http://www.iconfont.cn/


这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。


fontello


http://fontello.com/


在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。


icomoon


http://icomoon.io/app/#/select


可以在线导入的SVG格式字体，并进行编辑，然后下载来使用。很酷吧！


Font-Awesome


http://fortawesome.github.io/Font-Awesome/


这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。


Glyphicon Halflings


http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

1、现在以http://fontello.com/  为例

首先在Select Icons下选择要用的图标

2、选择之后会在Customize Names下出现你刚才选择的图标列表

3、Customize Codes下回出现你选择图标的代码

如：E800

4、点击右上角的 Download webfont  按钮把生成好的字体文件下载到本地

5、把本地的压缩文件解压之后，把font（我自己改名为fontello）文件夹复制到你webapp项目下WebContent/resources/sass/stylesheets/fonts下

6、在app.css文件里引入

@include icon-font('fontello', inline-font-files('fontello/fontello.woff', woff, 'fontello/fontello.ttf', truetype,'fontello/fontello.svg', svg));


@include icon('f', '\E800', 'fontello');

然后编译，这样这个图标就可以在js页面使用了

{
xtype: 'button',
name: 'buyNow',
iconCls:'f',
flex: 1,
text: '立刻购买'
},