原文：[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主题培训。鳄鱼看一看位于世界各地的开放式课程或参加网上培训。