css - 自定义图标 CSS 未按预期工作

Question

我在一个运行 wordpress 的站点上安装了 Font Awesome，我想更改图标以使用自定义图标。

我已经尝试过在 CSS 中解决它并更改它但没有成功。现在非常欢迎任何想法。

i.fa.fa-pencil {
    content: url(http://mskmartialarts.co.uk/wp- 
    content/uploads/2015/07/karate.jpg);
    background-image: url("http://mskmartialarts.co.uk/wp-content/uploads/2015/07/karate.jpg");
}

Answer 1

看看 Font Awesome 为该图标使用的 CSS:https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L358

实际上是 :before 伪元素，他们在其中设置字形:

.fa-pencil:before {
  content: "\f040";
}

所以你需要在你的代码中做同样的事情:

i.fa.fa-pencil:before {
  content: url('http://mskmartialarts.co.uk/wp-content/uploads/2015/07/karate.jpg');
}