Question

我正在尝试仅使用css更改图标，我需要显示信封。我想使用FontAwesome。我已经在我的style.css文件中导入了它：

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

我试过这个，但它不起作用，它只显示正方形：

.element:before {
   content: "\f0e0";
   font-family: FontAwesome;
}

有趣的是，如果我在jsfidle中尝试相同的话，那就行了。必须是我正在使用的Divi Theme中的其他一些风格正在阻止它。如何完成它？

这是我在my page上使用的确切代码：

a[title=flikr]:before {
  font-family: FontAwesome !important;
  content: "\f0e0" !important;

}

Answer 1

如果要在不同元素上使用FontAwesome图标，则需要确保在所述html元素上包含类和数据元素

<div class="fa fa-envelope" aria-hidden="true"></div>

生成图标的部分是类fa-envelope，类fa确定它将使用FontAwesome字体系列。

这是一个利用几个不同HTML元素上的图标的示例：JSFiddle

因此，正如我们发现的那样，你有默认的字体覆盖，以下是我将如何处理它：

/* Target all of your :before tags in this schema (ul li a :before) */
.et_pb_social_media_follow .et_pb_social_icon a:before{
    font-family: FontAwesome !important;
}

/* call your icons content style separately */
.et-social-flikr a.icon:before {
    content: "\e0a6" !important;
}

这应该定位导航中的所有方块并将其字体设置为FontAwesome，然后您的内容样式应添加图标。

如何将FontAwesome用于<i>以外的元素

1 个答案: