font awesome 是目前最流行的圖示方案之一，是一套優質的圖示字型庫以及 css 圖示框架。相對於傳統的作為圖示，字型圖示支援自適應調節大小、可以使用字型的一些特性調整風格（顏色、大小、字型陰影）、更小的檔案體積。
根據你或者專案的程式設計習慣，你可以通過以下幾種方式獲取最新版的 font awesome：
如果專案組有使用 bower 來管理第三方包，那麼可以通過 bower install fontawesome 來獲取 font awesome。
font awesome 的目錄結構是這樣，css 是 font awesome 提供的 css 類， fonts 內就是圖示的字型檔案，不同的格式是為了相容不同的瀏覽器，並且新版本開始支援 svg 的形式。less 和 scss 是用來管理 css 的。
在 extjs 專案中引入 font awesome
1. 首先依照專案的程式設計習慣以及規範，把 font awesome 整個包（上圖中的 font-awesome 目錄、如無必要可以刪除 less scss 目錄）拷貝到專案中（不要改變它原本的目錄結構）。
2. 然後在專案中引入 font-awesome.css ，對於 extjs ，有兩種引入的方式，可以依照專案的習慣自行選擇：
a. 在專案的 html （預設是 index.html）檔案中直接使用 引入這個 css
view source
print?
1.
view source
print?
01."css": [
02.,
06.
11.]
然後重新打包一次專案。在終端中到專案的目錄執行
view source
print?
1.
在 extjs 中通過設定 glyph 屬性來顯示 font awesome 圖示
extjs 的一些元件（button / menu item / image / header）的 glyph 屬性允許指定乙個文字去當作是乙個 icon
view source
print?
01.menu: ext.create('ext.menu.menu', ,,]
16.})
根據以上**，我們就能獲得這樣的效果：
我們可以看到 glyph 的值是 xf007@fontawesome 這種形式， 這個其實就是字型的 unicode@fontfamily ，就是在這個位置展示 unicode 為 0xf007 的這個字，並且把這個字的 fontfamily設定為 fontawesome ，這樣介面中就能顯示 fontawesome 設計的圖示。
我們可以到 fontawesome 提供的 cheatsheet 頁面檢視各種圖示對應的 unicode :
這裡需要注意的是這個頁面中顯示的 unicode 是以 html 的標準顯示的，如這種 ，而在 js 解析中以及 extjs 支援中，需要轉換成 utf (hex) 這種形式，也就是 0xf042 （首位是零）。在 css content 屬性中，需要轉換為 "\f042" 這種風格。
關於 unicode 的轉換以及不同的編碼方式請看：
簡化 extjs glyph 的值
如果你覺得每次新增 @fontawesome 很麻煩的話，那麼 extjs 有提供乙個 setglyphfontfamily 方法可以讓所有的 glyph 的預設的 fontfamily 設為 指定的值。
view source
print?
1.ext.setglyphfontfamily('fontawesome');
view source
print?
1.init:function(),
如此之後，上面的例子**就可以寫成：
view source
print?
01.menu: ext.create('ext.menu.menu', ,,]
16.})
在 template 以及 renderer 中使用 font awesome （直接在 dom 中使用）
上面的方式是配合使用 extjs glyph 屬性來顯示圖示，那麼如果你需要在你自己的 html **中使用它的話，那麼你可以使用它提供的一些 css class 來顯示：
view source
print?
1.
你可以自行新增一些 class 或者其它手段來控制它的大小和顏色樣式，就如同一般的 「文字」 那樣處理。
圖示的列表以及對應的 class name 可以檢視這個頁面：
擴充套件閱讀
1. extjs 也可以隨意搭配其它的字型圖示，你只需要知道每個圖示的 unicode 以及這個圖示集合設定的 fontawesome 即可（可以到 css 檔案中找）。
2. font awesome 這種圖示字型的優缺點分別是：
優：向量化可以任意大小、任意顏色 / 更小的檔案體積 / 可以支援更多的瀏覽器
缺：整個圖示的顏色就是字型顏色，圖示本身無法多個色彩（在扁平化風格中不是大問題）/ 當使用者環境使用了強制字型的時候，圖示字型可能回失效
3. 如何製作字型圖示？
4. 時下新的趨勢是 svg icon
5. 符合中文環境的圖示集合（國內的 sns 之類的）：iconfont | lomeye
ExtJS初探 在專案中使用ExtJS
今天extjs官網發布了extjs最新正式版4.2.1。extjs為開發者在開發富客戶的b s應用中提供豐富的ui元件，具有統一的主題，便於快速開發，提高效率。但顯然它並不適合互聯 的開發。builds 壓縮後的extjs 體積更小，更快 docs 開發文件 examples 官方演示示例 loca...
在專案中使用ExtJS
今天extjs官網發布了extjs最新正式版4.2.1。extjs為開發者在開發富客戶的b s應用中提供豐富的ui元件，具有統一的主題，便於快速開發，提高效率。但顯然它並不適合互聯 的開發。builds 壓縮後的extjs 體積更小，更快 docs 開發文件 examples 官方演示示例 loca...
在專案中使用ExtJS
下面來搭建extjs的開發環境。1.myeclipse中新建web project，目錄結構如下 注意 專案中extjs5.1.0目錄的檔案均來自extjs中build資料夾下，並且引用了crisp主題樣式，讀者也可引用其他 theme。scripts目錄下的script.js用來編寫extjs 而...