0

我正在使用 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秒后它修复了。

鼠标悬停失败：

鼠标悬停失败

鼠标移出失败：

鼠标移出失败

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

错误演示：http: //www.bootply.com/116686

4

1 回答 1

1

我为你找到了解决方案。事实证明，该图标并未覆盖所提供的全部空间。

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

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

我会把它放在通用图标类上，这样它会影响整个库，如果我没记错的话。将是 :before, :after 类名。很久没有使用图书馆了，所以试着只针对我想说的图标。

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

快乐编码:)

于 2014-02-26T08:59:36.540 回答