Use font awesome instead background image in .css – WordPress button replacement

3 Views

I just need to replace the following code to use the awesome font instead a background image. The goal is replace a button inside wordpress theme.

This is inside style.css

Read More
#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; }

And here the part inside header.php to “show” the button: 

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

Thanks to all.

Andrea

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. You can use pseudo-elements in CSS, :before and :after, like so : 

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

    And then position it however you want. You can find the unicode value for each icon by clicking on it, in the “icons” section of the FA website.