我正在尝试像这样集成 FontAwesome:
.accordion:after {
content: "\f0d7";
color: #9E3E39;
font-weight: bold;
float: right;
font-size: 15px;
margin-left: 5px;
margin-top: -80px;
font-family: FontAwesome;
}
最终结果是这样的:
\f0d7
这是我们用于 FA 的脚本:
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
这是在一个基于invisionfree的论坛中,使用bbcode [dohtml]来激活html编码。
我做错了什么?我觉得理论上应该一切都好?
最佳答案
虽然 FontAwesome 的 JavaScript 版本支持伪类,但它们是 not recommended :
因此,您应该使用 CSS 版本:
.accordion:after {
content: "\f0d7";
color: #9E3E39;
font-weight: bold;
float: right;
font-size: 15px;
/*margin-left: 5px;*/
/*margin-top: -80px;*/
font-family: FontAwesome;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="accordion">Accordion</div>
或者更好的是,使用<i>
标签(将其视为 svg
附加样式的目标):
.accordion svg {
color: #9E3E39;
font-weight: bold;
float: right;
font-size: 15px;
font-family: FontAwesome;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="accordion">Accordion <i class="fas fa-caret-down"></i></div>
关于css - 样式表中的 Font Awesome 5 图标以 unicode 形式显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49415785/