2

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

#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

Andrea
  • 67
  • 2
  • 10
  • similar question here about bullet points, no accepted answer http://stackoverflow.com/questions/29217374/given-this-select-element-css3-style-how-to-use-unicode-character-instead-of-ba – Mousey Sep 16 '15 at 16:33
  • another related question - all answers involve giving the Unicode value though http://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css – Mousey Sep 16 '15 at 19:50

1 Answers1

3

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.

Drown
  • 5,852
  • 1
  • 30
  • 49
  • Hi, can you post me the "full" code? I need to take the "old" code and after that put the "new" line: .youtube:before{ ? thanks – Andrea Apr 03 '15 at 22:36
  • Put the `:before` after the selector of the element you want to style, without any space (like a ` :hover` ) – Drown Apr 04 '15 at 00:55
  • try `#et-social-icons .youtube .et-social-normal:before {font-family: FontAwesome; content: "\f116";` where *f116* is the unicode for youtube-square, maybe? Unsure how to do it using. **fa fa-youtube-square**? – Mousey Sep 16 '15 at 16:34