加入谷歌材料設計圖標CSS僞：我只想做一些Google的材料設計<a href="https://www.google.com/design/icons/" rel="noreferrer">icons</a>添加到鏈接的內容上懸停內容

Question

後：

a:hover::after { 
    content: "<i class="material-icons">link</i>" 
} 

，但它不能正常工作，請參閱我的fiddle。

Answer 1

你的CSS改成這樣：

a:hover::after { 
    font-family: 'Material Icons'; 
    content: "link"; 
    -webkit-font-feature-settings: 'liga'; 
} 

所以，你可以改變content: "[whatever icon here]";

FIDDLE

而且小提琴未正確加載圖標字體所以把我放在鏈接html。

Answer 2

C.Schubert幾乎沒有與他們的答案，但如果你也想擁有IE10 +支持你需要添加font-feature-settings: 'liga' 1;所以最終的造型看起來就像這樣......

a:hover::after { 
    font-family: 'Material Icons'; 
    content: "link"; 
    -webkit-font-feature-settings: 'liga' 1; 
    -moz-font-feature-settings: 'liga' 1; 
    font-feature-settings: 'liga' 1; 
} 

而像C.Schubert表示將content: "[whatever icon here]";更改爲所需的圖標。

Answer 3

如果你想使用一個圖標素材有兩個或更多的話，那麼你就需要使用下劃線分隔這樣的：

a:hover::after { 
    font-family: 'Material Icons'; 
    content: "chevron_right"; 
}