css - 带有图标字体和 css 更改颜色的错误

Question

我正在使用 bootstrap 3 和 glyphicons(专业版，但它几乎相同，更多图标)作为字体。

上下文中的示例代码:

<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 秒后修复。

鼠标悬停失败:

MouseOut 失败:

注意:如果我将字母间距更改为 1.1em 或更大，它似乎可以解决图标右侧的问题，但找不到解决方法左边。

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

Answer 1

我为您找到了解决方案。事实证明图标没有覆盖提供的全部空间。

至少在 chrome 上解决这个问题是将以下 css 属性添加到 boothstrap 附带的图标集。

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

我会把它放在通用图标类上，这样它就会影响整个库，如果没记错的话。将是 :before, :after 类名。好久没和图书馆打过交道了，所以试着只针对我要说的图标。

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

快乐编码:)