Search code examples
cssfontsfont-awesomefont-awesome-4font-awesome-6

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

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:

enter image description here

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?

Solution

  • 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>