在.css-Wordpress按钮替换中使用字体替换背景图像

我只需要替换下面的代码来使用令人敬畏的字体，而不是背景图像。目标是替换wordpress主题中的按钮

这是inside 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>

谢谢大家

---

Andrea

您可以在CSS中使用伪元素，

：before

和

：after

，如下所示：

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

---

然后按你想要的方式定位。您可以通过点击FA网站“图标”部分中的每个图标来找到其unicode值。

Hi，您能给我发“完整”代码吗？我需要使用“旧”代码，然后添加“新”行：。youtube:before{？thanksPut the

：before

在要设置样式的元素选择器之后，没有任何空格（如“：hover”）尝试

#et social icons.youtube.et social normal:before{font-family:FontAwesome；内容：“\f116”；

f116可能是youtube square的unicode？不确定如何使用.fa fa youtube square？关于要点的类似问题，没有被接受的答案另一个相关问题-所有答案都涉及到给出unicode值