原文：Using Custom Icons in Your Ext JS App


作者：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中引用它。

  2. 下载图标字体并将它映射到一些字符（使用以下字符：>）。

  3. 在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;
}


  4.  好了，现在是见证奇迹的时刻。在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主题培训。鳄鱼看一看位于世界各地的开放式课程或参加网上培训。