CODEWITHSUNDEEP
javascriptcssextjsfontsfont-awesome
talha06
talha06

Reputation: 6466

Different styles for Font Icons

I'm using Font Awesome and icomoon icons for my web application by defining font faces.

Here is the font-face configuration:

@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;
}

When I use the icons through span tags, I see them darker than the icon configuration - I use them with Ext JS.

Here is the explanation of my issue:

explanation

How can I use the darker icons at anywhere I want?

p.s. Ext JS provices glyph configuration for its components such as panels, forms, buttons etc. API Docs

Example Usage:

A panel icon config - first icon in the screenshot: glyph: 'xf00c@FontAwesome'

Upvotes: 2

Views: 472

Answers (1)

Krzysztof
Krzysztof

Reputation: 16150

By default glyph opacity is set to 0.5. You should override style to make it more opaque:

.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;
}

Example: http://jsfiddle.net/89aeduo6/8/ (it uses Arial as glyph font)

Upvotes: 3

Related Questions