关于CSS：Sencha Architect ExtJs中的Icomoon字形应用程序无法正常工作


Icomoon Glyphs in Sencha Architect ExtJs Application not working

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

我已经在其demo.html页面中使用了图标集及其样式。

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

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

1
2
3
4
5
6
7
8
9
@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样式中，我有以下类别，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[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 @ icomoon，正确的表示形式应为

1
glyph: xe600@icomoon

那应该就可以了!!

  • 将与icomoon相关的CSS添加到app.json或index.html

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

  • 在按钮cfg中，无需提及iconCls即可获取字形。您可以改为仅应用字形cfg。

    • 字形：0xe600-(非字符串值)

    或

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

    相关讨论