【翻译】在Ext JS应用程序中使用自定义图标
最后更新于：2022-04-01 07:23:21
原文：[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主题培训。鳄鱼看一看位于世界各地的开放式课程或参加网上培训。