在CSS属性中将图标字体设置为背景

Question

我想要做的就是用CSS图标字体替换CSS中的背景图像,而不是图标图像.我做不到.这是CSS属性:

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

这是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; ?>

我插入一个无用字体的方式是 <span class="icon">A</span>

Answer 1

你可以尝试这样的事:FIDDLE

假设你有你的DIV:

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

你创建这样的CSS样式:

.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;
}?

在属性content您选择"信",然后你可以改变的font-size,font-weight,color,等...

Answer 2

css中有一个content属性:

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

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