使用字體真棒代替背景圖像在.css - Wordpress按鈕替換

我只需要替換下面的代碼來使用真棒字體，而不是背景圖像。目標是取代WordPress主題中的一個按鈕。使用字體真棒代替背景圖像在.css - Wordpress按鈕替換

這裏面的style.css

#et-social-icons .youtube .et-social-normal { background: url(images/YT.png) no-repeat 23px 23px; } 
#et-social-icons .youtube .et-social-hover { background: url(images/YT-hover.png) no-repeat 23px 23px; } 
#et-social-icons .youtube a:hover { background: #de2321; }

在這裏，裏面的header.php部分，以「顯示」按鈕：

<li class="youtube">        
    <a href="https://www.youtube.com/channel/UC3SNuSqLl09zS9IrxXswhIQ">      
     <span class="et-social-normal"><?php esc_html_e('Follow Us On YouTube', 'Nexus'); ?></span>     
     <span class="et-social-hover"></span>     
    </a>       
</li>

感謝所有。

安德烈

來源

2015-04-03 Andrea

類似的問題在這裏關於項目符號點，沒有接受的答案http://stackoverflow.com/questions/29217374/given-this-select-element-css3-style-how-to-use-unicode-character-instead-of -ba – Mousey 2015-09-16 16:33:40

另一個相關的問題 - 所有的答案涉及給予Unicode值雖然http://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css – Mousey 2015-09-16 19:50:23

可以使用僞元素的CSS，:before和:after，像這樣：

.element:before{ 
    font-family: FontAwesome; 
    content: "\Unicode"; 
}

然後定位你想要的東西。您可以通過在FA網站的「圖標」部分點擊它來找到每個圖標的unicode值。

來源

2015-04-03 21:35:34 Drown

嗨，你可以發佈我的「完整」碼？我需要採取「舊」的代碼，然後把「新」行： .youtube：之前{ ？謝謝 – Andrea 2015-04-03 22:36:06

把'：before'放在你想要的樣式的選擇器之後，沒有任何空格（如'：hover'） – Drown 2015-04-04 00:55:00

嘗試'＃et-social-icons .youtube .et-social-normal：before {font-family：FontAwesome;內容：「\ f116」;'其中* f116 *是youtube-square的unicode，也許？不確定如何使用它。 ** fa fa-youtube-square **？ – Mousey 2015-09-16 16:34:57

使用字體真棒代替背景圖像在.css - Wordpress按鈕替換

回答

相關問題