Question

我只需要替换以下代码以使用真棒字体而不是背景图像。目标是替换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里面的部分是＆＃34;显示＆＃34;按钮：

<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>

感谢所有人。

安德烈

Answer 1

您可以在CSS中使用伪元素，:before和:after，如下所示：

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

然后根据需要定位它。您可以在FA网站的“图标”部分中单击每个图标，找到每个图标的unicode值。

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

1 个答案: