Search code examples
htmlcssunicodefont-awesomecontao

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

I am trying to include FontAwesome to an ::before-element. The include to the website worked (I have other Icons in an i-element on the website) but the unicode-way won't work.

I've trying to add an icon for the previous-button in fontAwesome like that:

    .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;
}

But it just shows up like that:

Error

I tested adding height and width, making it a block-element.. nothing seems to work. I am using the Contao CMS.

Solution

  • When I insert <i class="fas fa-chevron-left"></i> before your button via dev tools and then inspect it, it shows the font-family for the i element as "Font Awesome 5 Free" - you used FontAwesome for your button ::before element instead.