字体图标的不同样式

Question

我通过定义字体面孔为我的Web应用程序使用Font Awesome和icomoon图标。

这是font-face配置：

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

当我通过span标签使用图标时，我看到它们比图标配置更暗 - 我将它们用于Ext JS。

以下是我的问题的解释：

如何在任何我想要的地方使用较暗的图标？

P.S。 Ext JS为其组件提供glyph配置，例如面板，表单，按钮等。API Docs

使用示例：

面板图标配置 - 屏幕截图中的第一个图标：glyph: 'xf00c@FontAwesome'

Answer 1

默认情况下，字形不透明度设置为0.5。您应该覆盖样式以使其更不透明：

.x-btn-icon-el-default-small.x-btn-glyph, 
.x-btn-icon-el-default-medium.x-btn-glyph, 
.x-btn-icon-el-default-large.x-btn-glyph,
.x-btn-icon-el-default-toolbar-small.x-btn-glyph,
.x-btn-icon-el-default-toolbar-medium.x-btn-glyph,
.x-btn-icon-el-default-toolbar-large.x-btn-glyph
{
    opacity: 1.0;
}

示例：http://jsfiddle.net/89aeduo6/8/（它使用Arial作为字形字体）