如何使用FontAwesome作为除<i>之外的其他元素

我试图仅使用css更改图标，并且我需要显示信封。我想使用FontAwesome。我已经导入它在我的style.css文件：如何使用FontAwesome作为除<i>之外的其他元素

@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主题中的其他一些样式会阻止它。如何完成它？

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

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

}

来源

2017-04-04 ivanacorovic

似乎为我工作的罚款。请编辑你的问题并提供一个[最小，完整和可验证的示例]（https://stackoverflow.com/help/mcve）。 – Xufox

你是对的，在这种特殊情况下，它不起作用。我编辑了这个问题。 – ivanacorovic

如果你想在不同的元素使用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，那么你的内容风格应该添加的图标。

来源

2017-04-04 14:12:10

这很好，但我试图在这里避免使用jQuery，并且这是我可以在此更改代码以在此情况下添加类和aria隐藏属性的唯一方法。 – ivanacorovic

嗨@ivanacorovic我正在看你的页面，这是什么字体家族？ 'font-family：“ETmodules”！important;'？这是一个元素，应该设置为'font：normal normal normal 14px/1 FontAwesome;' –

这是一个默认字体，但我看起来不正确。你是对的，对于这个元素来说，这是比我尝试使用的元素更好的选择，而且因为它们都很重要，所以我不会被挑选出来。谢谢！我一直在看这个太久了。 – ivanacorovic

如何使用FontAwesome作为除<i>之外的其他元素

回答

相关问题