Dani Bălă Dani Bălă - 1 month ago 9
CSS Question

Set icon font as background in CSS property

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

You could try something like this: FIDDLE

Let's say you have your DIV:

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

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