将“内容”替换为导航栏中的“图像”

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

Answer 2

.fa-home:before {
  content: url(header_home.png); /*use correct path to image */
}