when changing versions FontAwesome 4 to 6, how to specify correctly in css?

Question

good day! there is a static website in html, it has replaced Font Awesome 4 with 6, and there are no problems, however, one of the slider display classes that is missing, namely the left and right scrolling buttons:

previously, I had no problems using it... for example, I can use this or that:

<i class="fa-solid fa-angle-right"></i>
<span class="fa-brands fa-whatsapp"></span>

however, I could not edit these elements implemented through the style.css file

.bx-controls .bx-prev:before { content:"\f104"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; font-size:20px; position:absolute; left:0px; right:0; }
.bx-controls .bx-next:before { content:"\f105"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; font-size:20px; position:absolute; left:0px; right:0; }

this is implemented as it is not clear to me, through some indication of the numbers 104 \ 105 for these queries I could not find on the official website how to work with it, I found only the "cheat sheet" pages, on which only these icons and codes have the same kind, how to work with it is unclear, anyone has encountered with this already?

Answer 1

From v6 docs: Add an Icon Using CSS Pseudo-elements

  .bx-controls > div::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
.bx-controls .bx-prev:before { content:"\f104"; font: var(--fa-font-solid);}
.bx-controls .bx-next:before { content:"\f105"; font: var(--fa-font-solid);}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/solid.min.css" rel="stylesheet"/>

<div class="bx-controls">
<div class="bx-prev"></div>
<div class="bx-next"></div>

</div>

Answer 2

the problem is not displaying icon elements Awesome 6 after switching to the template from the 4th version: if there are no parameters in the .css file

var(--fa-font-solid);
font-family:Font Awesome 6 Free;

initially, the line looked like this

.bx-controls .bx-prev:before { content:"\f104"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; font-size:20px; position:absolute; left:0px; right:0; }

the working version of this line should look like this

.bx-controls .bx-prev:before { content:"\f104"; font: var(--fa-font-solid); font-family:Font Awesome 6 Free; font-style:normal; font-weight:normal; text-decoration:inherit; font-size:15px; position:center; left:0px; right:0; }