ブートストラップ 3 と glyphicons (PRO バージョンですが、ほとんど同じですが、いくつかのアイコンが追加されています) をフォントとして使用しています。
コンテキスト内の 1 つのサンプル コード:
<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