html - 将导航栏中的 "content"替换为 "image"

Question

.fa-home:before {
    content: "\f015";
}

<li>
  <a href="/index.php" class="homelink">
    <i class="fa fa-home"></i>
  </a>
</li>

我想将导航栏中的“content”属性“home”值替换为导航栏中的相应图像。

这是我的“内容”属性的 CSS

.fa-home:before 
{
   content: "\f015";
}

所以现在我需要用“header_home.png”图像替换它。任何人都给我信息如何用图像替换它。

Answer 1

你可以使用这样的东西。您可以使用变换比例来控制图像的纵横比，就像您想要的那样。如果我答对了你的问题。

.fa-home:before {
    content:url(/concrete5/application/images/header_home.png);
    transform: scale(1);
}

也可以用这个方法控制高宽

.fa-home:before {
    content:"";
    display: inline-block;
    width: 30px; 
    height: 30px;
    background-image: url(/concrete5/application/images/header_home.png);
    background-size: 30px 30px;
}

fiddle