Set icon font as background in CSS property

Question

All I want to do is replace a background image in CSS with an icon font, not icon image. I can't get it done. This is the CSS property:

.social-networks .twitter{background:url(../images/social/twitter.png);} 

This is the code in PHP:

<ul class="social-networks">     <?php if (my_option('twitter_link')): ?>         <li>             <a href="<?php echo my_option('twitter_link'); ?>"  class="twitter">twitter</a>         </li>     <?php endif; ?> 

The way I insert an incon font is <span class="icon">A</span>

Answer 1

You could try something like this: FIDDLE

Let's say you have your DIV:

<div class="test"></div> 

you create your css style like this:

.test {     width: 100px;     height: 100px;     border: 2px solid lightblue; }  .test:before {     content: "H";     width: 100%;     height: 100%;     font-size: 5.0em;     text-align: center;     display: block;     line-height: 100px; }​ 

in the property content you choose your "letter" and then you can change the font-size, font-weight, color, etc...

Answer 2

There is a content property in css:

.icon-rocket:after {    content: "{Symbol for rocket}"; } 

http://www.w3schools.com/cssref/pr_gen_content.asp