原文：[Using Custom Icons in Your Ext JS App](http://www.sencha.com/blog/using-custom-icons-in-your-ext-js-apps?mkt_tok=3RkMMJWWfF9wsRolu63MZKXonjHpfsX57uwtUae2i4kz2EFye%2BLIHETpodcMTcNnMa%2BTFAwTG5toziV8R7PCKM1338YQWhPj) 作者：Lee Boonstra Lee is a technical trainer at Sencha. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She is writing a cookbook for O'Reilly about Sencha Touch. 正如我所做的，你喜歡Ext JS 4.2的glyphs（字形）屬性么？對于glyphs，可以實現從字體中創建圖標。使用圖標字體的優勢是，他們是矢量的，因此永遠不會失真，而且可以在不使用Photoshop的情況下很容易實現樣式圖標，以及只需要做一次頁面請求就可以下載所有的圖標。 屬性glyphs可應用于Ext JS按鈕和面板。可以從IcoMoon這樣的網站下載自定義的字體或者根據自己的樣式表來實現字體。屬性glyphs的值是映射到它所代表的圖標的Unicode字符的十進制代碼。將自定義字體的名稱添加到該屬性會更好，如以下代碼： ~~~ glyph: '115@MyIconFont', ~~~ 有大量的Ext JS組件會從面板擴展，但是否考慮過在不從Ext.panel.Panel或Ext.button.Button擴展的其他組件里實現圖標字體嗎？ 要回答這個問題，可以從以下隱藏而實際正在實行的概念入手： 一個字符在插入到確定的DOM元素之前（或之后），能看到圖標是因為該字符被樣式化為包含所有圖標的自定義字體（@font-face技術）。 下面自己來試試這個： 1. 在瀏覽器的開發工具內，選擇想實現圖標的DOM元素。理想的情況下是在它的頂部放置一個CSS類（如：箭頭），這樣就可以很容易的從Sass中引用它。 1. 下載圖標字體并將它映射到一些字符（使用以下字符：>）。 1. 在Sass實現圖標字體。 ~~~ @font-face { font-family: 'MyIconFont'; src: url('../resources/fonts/Nouveau.eot'); src: url('../resources/fonts/Nouveau.eot?#iefix') format('embedded-opentype'), url('../resources/fonts/Nouveau.woff') format('woff'), url('../resources/fonts/Nouveau.ttf') format('truetype'), url('../resources/fonts/Nouveau.svg#Nouveau') format('svg'); font-weight: normal; font-style: normal; } ~~~ 1. 好了，現在是見證奇跡的時刻。在Sass樣式表，編寫以下CSS規則： ~~~ .arrow:before { content: ">"; //the character mapped to an icon font-family: 'MyIconFont'; //the name of the icon font color: red; //set additional colors or dimensions... margin-right: 10px; } ~~~ 偽CSS選擇符“:befor”會在DOM元素的左邊創建圖標。偽CSS選擇符“:affter”會在DOM元素的右邊創建圖標。 現在已經了解了如何使用這項技術，就可以在任何組件來嘗試它了，如模板、數據視圖、表單字段等等。 想了解更多么？Sencha將在1月27日到31日在線直播提供高級Ext JS主題培訓。鱷魚看一看位于世界各地的開放式課程或參加網上培訓。