使用 unicode 将 FontAwesome 绑定到 ::before - 显示密码图标答案

【问题标题】：Binding FontAwesome to a ::before with unicode - displays crypdo-icon使用 unicode 将 FontAwesome 绑定到 ::before - 显示密码图标
【发布时间】：2020-12-10 20:55:53
【问题描述】：

我正在尝试将 FontAwesome 包含到 ::before 元素中。包含到网站的工作（我在网站上的 i 元素中有其他图标）但 unicode 方式不起作用。

我正在尝试为 fontAwesome 中的上一个按钮添加一个图标：

    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    font-family: "fontAwesome";
}

.owl-carousel .owl-nav .owl-prev::before{
    content: "\f053";
    font-family: FontAwesome;
    margin-right:10px;
}

但它只是这样显示：

我测试了添加高度和宽度，使其成为块元素.. 似乎没有任何效果。我正在使用 Contao CMS。

【问题讨论】：

您使用的是哪个版本的 fontawesome？新版本要求您设置每个字形不同的权重，对于 chevron left that'sfont-weight: bold;
@AlexanderDeSousa 我正在使用第 5 版并尝试使用 hte 字体粗细，但没有任何变化。
@AlexanderDeSousa 你可以在这里查看：vacationy.siteholder.de（底部）
当我通过开发工具在您的按钮前插入<i class="fas fa-chevron-left"></i> 然后检查它时，它会将i 元素的字体系列显示为"Font Awesome 5 Free" - 您使用FontAwesome 作为您的按钮::before 元素。
我在本地安装了 FontAwesome，因此我的计算机正在查找并显示正确的图标，感觉就像您缺少网站上的字体，您确定要包含它吗？

标签： html css unicode font-awesome contao

【解决方案1】：

当我通过开发工具在您的按钮之前插入<i class="fas fa-chevron-left"></i> 然后检查它时，它会将i 元素的字体系列显示为"Font Awesome 5 Free" - 您使用FontAwesome 作为您的按钮::before 元素.

【讨论】：