html - フォントの使用法としての HTML/CSS アイコン - ホバーの色の変更

Question

このアイコンのテクニックをフォントとして使い始めようと考えています。しかし、リンクにカーソルを合わせると色が変わる方法がわかりません。これはあなたが遊ぶためのjsfiddleです：

http://jsfiddle.net/eNhUf/17/

ご覧のとおり、 「注意」のようなテキストにカーソルを合わせると、テキストが青色になり、アイコン/フォントも青色になるようにしたいと思います。

誰もこれを行う方法を知っていますか?

ありがとう。

Answer 1

.caution.icon:hover:before{content:"\0021";color:green }

これにより、リンクにカーソルを合わせると警告アイコンが緑色になります。このアイデアは好きなようにカスタマイズできます。http://jsfiddle.net/agentmilindu/eNhUf/24/

Answer 2

フォント アイコン ライブラリは通常、事前に生成されたコンテンツを使用してアイコンを要素に挿入します。つまり、その領域をターゲットにして色を設定する必要があります。

<p class="icon caution email">Email</p>
<style type="text/css">
   .icon.caution, .icon.caution:before { color:blue; }
</style>

Answer 3

これを試して：

.icon:hover, .icon:hover:before { color: blue; }