使用 unicode 将 FontAwesome 绑定到 ::before - 显示 crypdo-icon

Question

我正在尝试将 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。

Answer 1

当我通过开发工具在你的按钮前插入 <i class="fas fa-chevron-left"></i> 然后检查它时，它显示 i 元素的 font-family 为 "Font Awesome 5 Free" - 你使用 FontAwesome 代替您的按钮 ::before 元素。

使用 unicode 将 FontAwesome 绑定到 ::before - 显示 crypdo-icon

Binding FontAwesome to a ::before with unicode - displays crypdo-icon

html

css

unicode

contao

font-awesome