css - Sencha Architect ExtJs 应用程序中的 Icomoon 字形无法正常工作

Question

我正在为我的 extjs 5 应用程序(非 touch)使用 Sencha Architect 3.0。我需要使用 icomoon 字体实现字形。我正在执行以下步骤。

我有图标集和它的样式，已经在它的 demo.html 页面中工作了。

我已经在资源位置下的 css 文件夹中复制了 fonts 文件夹和相关样式，也使用 Sencha Architect 添加了 css。

也在 style.css 中找到正确的字体位置。例如

@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?-lgz2n8');
src:url('../fonts/icomoon.eot?#iefix-lgz2n8') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?-lgz2n8') format('truetype'),
    url('../fonts/icomoon.woff?-lgz2n8') format('woff'),
    url('../fonts/icomoon.svg?-lgz2n8#icomoon') format('svg');
font-weight: normal;
font-style: normal;}

在样式 css 中，我有以下类，例如:

[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-2008:before {
    content: "\e600";
}

在 Ext 按钮中，我将 iconCls 属性设置为“icon-2008”，将字形设置为 e600。

它向我展示了按钮上的字形，但在按钮的背景中显示了 &#e600。

在 Sencha CMD 中:sencha 应用程序刷新就好了..

请指出我做错了什么，或者我应该遵循哪些步骤？

谢谢

Answer 1

1. 将您的 icomoon 相关的 css 包含到您的 app.json 或 index.html 中

2. 将此行包含在您的 app.js 或 application.js 中Ext.setGlyphFontFamily('icomoon');

3. 在您的按钮配置文件中，无需提及用于获取字形的 iconCls。您可以只应用字形 cfg。

字形:0xe600 -(非字符串值)

或

字形:'600@icomoon' -(字符串值)