Разные стили для иконок

Я использую значки 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.

Вот объяснение моего вопроса:

объяснение

Как я могу использовать более темные значки в любом месте, где я хочу?

P. S. Ext JS provices glyph конфигурация для его компонентов, таких как панели, формы, кнопки и т.д. API Docs

Пример Использования:

Значок панели config - первый значок на скриншоте: glyph: 'xf00c@FontAwesome'

1 2
javascript css fonts font-awesome extjs

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 в качестве шрифта глифа)

3