【翻译】在Ext JS应用程序中使用自定义图标

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



你可能感兴趣的:(样式,ExtJs,字体图标)