HTML/CSS Icons als Schriftartenverwendung - Hover Wechsel der Farbe

Question

Ich überlege, diese Technik der Icons als Fonts zu verwenden, da es ziemlich genial erscheint. Aber ich kann nicht herausfinden, wie es Farben beim Schweben der Verbindung ändert. Hier ist ein jsfiddle für Sie zu spielen:

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

Wie Sie sehen werden, wenn Sie schweben ein Text wie „Vorsicht“, der Text zu BLUE geht, und ich möchte auch das Symbol/Schriftart, um auch blau zu gehen.

Weiß jemand, wie man das macht?

Danke.

Answer 1

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

Dies wird Vorsicht Symbol gehen grün, wenn Sie den Link bewegen, ich bin sicher, dass Sie die Idee anpassen können, wie Sie möchten! http://jsfiddle.net/agentmilindu/eNhUf/24/

Answer 2

Symbolbibliotheken verwenden normalerweise vorgenerierten Inhalt, um das Symbol in das Element zu injizieren. Dies bedeutet, dass Sie diesen Bereich anvisieren und die Farbe festlegen müssen.

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

Answer 3

Versuchen Sie folgendes:

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