html – 将图标字体设置为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>

解决方法

你可以尝试这样的事情： 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;
}​

在属性内容中选择您的“信”,然后您可以更改字体大小,字体重量,颜色等…