javascript - 字体图标的不同样式

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

这里是我的问题的解释:

如何在我想要的任何地方使用深色图标？

附注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 作为字形字体)