FontAwesome 5 using with pseudo elements and additional class

Question

How I can use FA 5.1 in pseudoelements with additional classes like "far" and "fas"?

I would like to use this square https://fontawesome.com/icons/square?style=regular as regular but it looks regular only with "far" square. The problem is I use them for pseudoelement like "after" and can't figure out how I can tell it to use "far" class too.

The css I'm using:

.square:before {
    font-family: "Font Awesome 5 Free"; 
    font-size: 12px;
    font-weight: 900;
    content: '\f0c8';
}

Thanks

Answer 1

It depends on the Font Awesome css that you include. If you include the regular.css, it displays the shapes in their regular form.

.square:before {
    font-family: "Font Awesome 5 Free"; 
    font-size: 120px;
    font-weight: 900;
    content: '\f0c8';
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/regular.css" integrity="sha384-avJt9MoJH2rB4PKRsJRHZv7yiFZn8LrnXuzvmZoD3fh1aL6aM6s0BBcnCvBe6XSD" crossorigin="anonymous">

<div class="square"></div>

It get's interesting, when you want the best of both worlds, solid and regular shapes. You can include the all.css from FontAwesome and change between solid and regular shapes by setting the font-weight: font-weight: 900 displays a solid shape, font-wight: 400 displays a regular shape.

.square-solid:before {
    font-family: "Font Awesome 5 Free"; 
    font-size: 120px;
    font-weight: 900;
    content: '\f0c8';
}


.square-regular:before {
    font-family: "Font Awesome 5 Free"; 
    font-size: 120px;
    font-weight: 400;
    content: '\f0c8';
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<div class="square-solid"></div>

<div class="square-regular"></div>