Google-Symbole ändern sich: Fokus

Question

Ich habe gerade mit Google Material Icons begonnen.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
     rel="stylesheet"> 

<a title="E-mail " href="mailto:es@example.com?subject=RE:&nbsp;Estimate Request"><i class="material-icons md-36 bg_white">email</i></a> 
    <a title="Call" href="tel:+15555555"><i class="material-icons md-36 bg_white">call</i></a> 
    <a title="Send SMS" href="sms:+5555555"><i class="material-icons md-36 bg_white">message</i></a> 

Gibt es eine Möglichkeit die Symbole auf Fokus zu markieren, so dass es eine offensichtliche visuelle Warteschlange (andere als die dünne blaue Grenze) ist, dass das Symbol wird hervorgehoben, wenn Registerkarten? Wie eine Farbänderung oder ein Overlay oder die Anzeige des Titels oder etwas ...

Hier ist meine CSS: Ich habe versucht, zu den hinzufügen: Fokus, aber nichts ändert sich.

.material-icons.md-18font-size:18px} 
.material-icons.md-24{font-size: 24px} /* Default */ 
.material-icons.md-36{font-size: 36px} 
.material-icons.md-48{font-size: 48px} 
.material-icons{color:green /*#663300*/} 
.material-icons:active, .material-icons:focus, .material-icons:hover{color:#8bc34a} 

Danke.

Answer 1

Ist es ein Tippfehler oder haben Sie es auch so im Quellcode? Denn wenn Letzteres der Fall ist, dann scheint in Ihrem CSS in der ersten Zeile { zu fehlen, wo Sie .material-icons.md-18font-size:18px} haben, wenn es sein sollte. Wenn man es repariert, ändert sich die Farbe auf den Icons, zumindest unter :hover.