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

---

插入incon字体的方式是

A

css中有一个内容属性：

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

---

你可以试试这样的方法：

假设你有自己的部门：

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

---

在属性

content

中，选择“字母”，然后可以更改

字体大小

，

字体重量

，

颜色

，等等。

使用导航文本而不是背景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>']
});

---

我想出了一些有趣的东西，imo:CSS

element（）

函数。当前它（因此请确保您正在该浏览器中打开末尾链接的示例）

以下是HTML：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

<div class="bg-patterns">
  <i class="material-icons" id="icon">pets</i>
</div>

<div class="with-icon-bg">
   Hi! I'm paragraph with background made from ordinary HTML element! And BTW - I'm a pets lover. 
</div>

---

最后，还有一个（jsFiddle）。

我认为这是不可能的，除了（可能）在Firefox中：。（但我不能完全确定我是否理解您的问题或要求）。我只想调用图标字体作为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;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

<div class="bg-patterns">
  <i class="material-icons" id="icon">pets</i>
</div>

<div class="with-icon-bg">
   Hi! I'm paragraph with background made from ordinary HTML element! And BTW - I'm a pets lover. 
</div>

.material-icons {
  /* icon font */
  font-family: 'Material Icons'; 
  color: #ddd;
}

/* this is a wrapper for elements you want to use
as backgrounds, should not be visible on page */
.bg-patterns {
  margin-left: -90000cm; 
}

.with-icon-bg {
  /* all magic happens here */
  background: -moz-element(#icon);


  /* other irrelevant styling */
  font-size: 25px;
  width: 228px;
  margin: 0 auto;
  padding: 30px;
  border: 3px dashed #ddd;
  font-family: sans-serif;
  color: #444;
  text-align: center;
}