不同样式的字体图标

debugcn 发表于 Dev

talha06

我通过定义字体来为我的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 JSglyph针对其组件（例如面板，表单，按钮等）的配置。API Docs

用法示例：

面板图标配置-屏幕截图中的第一个图标：glyph: 'xf00c@FontAwesome'

克里斯托弗

默认情况下，字形不透明度设置为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作为字形字体）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。