在 Sencha Extjs5 中使用FontAwesome矢量图标

2019独角兽企业重金招聘Python工程师标准>>>

1.下载Font Awesome压缩包。

• • 进入下载页面：https://github.com/FortAwesome/Font-Awesome

  • 点击右边的下载源程序

2.解压文件到应用程序目录。

• •     将压缩目录下的css和fonts目录拷贝到Extjs项目下的resources目录。如下图：

    

3.添加css样式引用。

• 打开app.json文件，在"css"属性中添加css的引用。如下图：

  
  

• 编译app工程

         打开终端切换到app项目路径下，输入命令：  sencha app build

4.在Extjs中设置glyph的属性显示Font-Awesome图标。   

{

     xtype : 'button',

     glyph:'xf0cb@FontAwesome',

     text : '删除'

}

简化glyph编码：

在Application.js启动文件的init事件中初始化glyph:

init:function(){

       Ext.setGlyphFontFamily('FontAwesome');

}

然后在view文件中可以直接省略@FontAwesome，如下：

{

    xtype : 'button',

    glyph:0xf0cb,

    text : '增行'

}

5.附加

• FontAwesome代码查询网址

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

转载于:https://my.oschina.net/caimingkai/blog/347275