2014-12-21 2 views
2

Я использую шрифты 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.

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

explanation

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

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

Примера:

значка Панели конфигурация - первого значка в скриншоте: glyph: '[email protected]'

+0

Покажите свой HTML код и специфический стиль для соответствующего элемента. –

+0

сообщение обновляется и добавляется настройка значка. – talha06

+0

Только css ничего не говорит. Пожалуйста, разместите несколько HTML. – Claudio

ответ

3

По прозрачность глифа по умолчанию установлена ​​на 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 в качестве глифов шрифта)

+0

не работает; все еще значки легче, чем стандартные. – talha06

+0

Работает для меня, например: http://jsfiddle.net/89aeduo6/8/ (я использовал arial там, но то же самое относится и к другим шрифтам). Если у вас есть другая тема, могут быть и другие стили, применяемые к глифам, с помощью некоторых инструментов разработчика для определения различий. Если у вас все еще будет проблема, попробуйте воспроизвести его на скрипке. – Krzysztof

+0

dou у вас есть возможность посмотреть скрипку здесь - я разветвил ваш и просто изменил значок кнопки на: «xf067 @ FontAwesome», который является простым значком «плюс» http://jsfiddle.net/talhakabakus/gLb8jbtm/ – talha06

Смежные вопросы