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

Question

我想做的就是用图标字体替换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; ?>

我插入incon字体的方式是<span class="icon">A</span>

Answer 1

您可以尝试如下所示：

假设你有你的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中，您可以选择"letter“，然后您可以更改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

Answer 3

使用导航文本而不是背景img。

$(".slider").owlCarousel({
    navigation : true,
    slideSpeed : 500,
    singleItem:true,
    navigationText:['<i class="fa fa-chevron-left" aria-hidden="true"></i>', '<i class="fa fa-chevron-right" aria-hidden="true"></i>']
});

并设置css属性的字体可怕的图标。这是图标的普通css。

.owl-button{
   position:relative;
}
.owl-prev {
   position:absolute;
   top:0;
   left:47%;
   font-size: 30px;
}
.owl-next {
    position:absolute;
    top:0;
    right:47%;
    font-size: 30px;
}