不同樣式的字體圖標

Question

我通過定義字體來為我的Web應用程序使用Font Awesome和icomoon圖標。

這是字體配置：

@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一起使用。

這是我的問題的解釋：

如何在需要的任何地方使用較暗的圖標？

ps 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作為字形字體）