本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38458411](http://blog.csdn.net/sushengmiyan/article/details/38458411) 本文作者：sushengmiyan -------------------------------------------------資源鏈接-------------------------------------------------------- FontAwesome?glyph編碼：[http://fortawesome.github.io/Font-Awesome/cheatsheet/](http://fortawesome.github.io/Font-Awesome/cheatsheet/) 使用圖標美化按鈕:?[http://blog.csdn.net/jfok/article/details/35994081](http://blog.csdn.net/jfok/article/details/35994081) use font awesome Icons in Ext js :?[http://extjs.eu/using-font-icons-in-ext-fontawesome/](http://extjs.eu/using-font-icons-in-ext-fontawesome/) -------------------------------------------------------------------------------------------------------------------- ### **前期準備：** ------------- 1.了解sencha cmd 2.了解Ext JS 5 即可以完成[?http://blog.csdn.net/sushengmiyan/article/details/38313537](http://blog.csdn.net/sushengmiyan/article/details/38313537) 內容即可順利進入本節學習。 第二節結束后，我們可以使用sencha cmd構建一個項目，一般來說，網站對于美工要求是比較多的，看起來舒適的網店大家都愿意上。使用sencha cmd 自動構造出來的程序，按鈕就是一個普通的按鈕，面板也是普通的面板，如果我想對按鈕增加一個圖標，是不是會更好看呢？本節介紹一種簡單的給ext js程序增加fontawesome提供的圖標的方法。 ### **Font Awesome簡介** -------------------------- Font Awesome是一款很流行的字體圖標工具。隨著Bootstrap的流行而逐漸被人所認識，現在FontAwesome不僅僅可以在bt上使用，還可以應用在各種web前端開發中。相對于傳統的使用背景圖片作為圖標，字體圖標主要是支持自適應、可以使用字體的各種特性（比如變色、變大變小、字體陰影等）、減少數據加載、樣式更容易定義等。 官網：[http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/) 最新版本：4.1 ### **在Ext js中使用 Font Awesome** ---------------------------------------- 在Ext中使用Font Awesome 非常簡單，首先我們需要下載Font Awesome壓縮包 ### ? 1.下載Font Awesome壓縮包。 ? ? ?下載地址：[http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip](http://fontawesome.io/assets/font-awesome-4.2.0.zip) ? ? ?點擊下載，或者進入官網下載最新版本即可。 ### ? 2.解壓縮文件到應用程序目錄。 ? ?下載之后，我們可以看到font-awesome-4.1.0.zip這樣的zip壓縮包，解壓縮，可以看到有如下目錄：  我們只需要其中的css目錄和fonts目錄即可。 解壓到應用程序目錄，即有.sencha文件夾的這個目錄，我解壓之后如下：  ### 3.將css文件引入我們的項目 打開項目中的index.html文件，加入如下代碼： ~~~ <link type="text/css" rel=" stylesheet" href="css/font-awesome.css""> ~~~ ### 4.給按鈕等增加圖標 好，準備工作完成，現在就將好看的圖標增加進程序，先跟我一起修改app\view\main文件夾下的Main.js文件  用editPlus打開，大約是在32行和33行。 我們將button的值改成了保存，然后增加了一個glyph屬性，這樣的話運行效果如下：  ### 5.疑惑解釋 對于button和面板等來說，都存在glyph這個屬性，我們可以通過這個屬性給按鈕等加好看的圖標。 后面跟著的是一串字符碼，這個字符碼我們如何獲取呢？ glyph碼獲取：?[http://fortawesome.github.io/Font-Awesome/cheatsheet/](http://fortawesome.github.io/Font-Awesome/cheatsheet/) 對于每一個版本都有對于的cheatsheet頁面，我們到這里面找我們喜歡的圖標，然后比對后面的字碼即可。? Every Font Awesome 4.1.0 Icon, CSS Class, & Unicode ：[http://fortawesome.github.io/Font-Awesome/cheatsheet/](http://fortawesome.github.io/Font-Awesome/cheatsheet/) ### 另一種簡化實現： 如果說，每次都鍵入'xf0c7@FontAwesome'后綴@FontAwesome比較繁瑣，那么你可以在程序加載的時候指定字體格式。 如在Mian.js中的initComponent函數值中增加Ext.setGlyphFontFamily('FontAwesome');那么后期使用的時候就可以不加后綴啦。 但是需要注意的是，這樣操作之后，就不可以使字符串形式了，需要是數字形式了。如：  設置全局字體文件  簡化之后的glyph處理