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');
}

Answer 2

为什么要对抗Font-Awesome？而是在css中创建自己的图标类。

.custom-icon {
    background: url("http://mskmartialarts.co.uk/wp-content/uploads/2015/07/karate.jpg") center no-repeat;
  background-size:100%;
  padding:10px;
}
<i class="custom-icon">&nbsp;</i> Blah

CodePen Example

自定义图标CSS无法按预期工作

2 个答案: