Question

我使用bootstrap 3和glyphicons（PRO版本，但它几乎相同，更多图标）作为字体。

上下文中的示例代码：

<div class="col-md-4">
     <span class="glyph_icons compass"></span><br />
     <h4>Jurassic Park Lorem Ipsum</h4>
     <p>I was overwhelmed by the power of this place; but I made a mistake, too. I didn't have enough respect for that power and it's out now. The only thing that matters now are the people we love: Alan and Lex and Tim. John, they're out there where people are dying.</p>
 </div>

效果很好。现在我想添加一个悬停颜色变化，它有一些故障。有时（但并非总是）它不能正确地改变图标两侧的颜色（它在跨度框外部的部分。有时它在鼠标悬停时失败，有时在鼠标移动时返回到原始颜色。大约1秒后它就修复了。

MouseOver失败：

mouseover failed http://i.picresize.com/images/2014/02/21/kaQTN.png

MouseOut失败：

mouseout failed http://i.picresize.com/images/2014/02/21/Buvg.png

注意：如果我将字母间距更改为1.1em或更高，它似乎可以修复图标右侧的问题，但无法找到修复它的方法左边。

错误的DEMO： http://www.bootply.com/116686

Answer 1

我找到了适合你的解决方案。事实证明，图标并未覆盖所提供的整个空间。

至少在chrome上修复此问题是将以下css属性添加到boothstrap附带的iconset中。

.glyphicon-sound-dolby:before {
    content: "\e190";
    padding: .1em;
}

我会将它放在通用图标类上，因此它会影响整个库，如果内存对我有用。将是：之前，：课后名称。多年没有使用过图书馆，所以尽量只针对我想说的图标。

:before, :after{
    box-sizing: border-box;
    padding: .1em;
}

快乐编码：）

图标字体和CSS的错误改变颜色

1 个答案: