0

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?

Vision 10
  • 13
  • 5

2 Answers2

0

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>
haolt
  • 353
  • 1
  • 9
  • it worked a little differently added a value to the string var(--fa-font-solid) and replaced font-family:FontAwesome; to font-family:Font Awesome 6 Free; - I didn't have to add anything else, only these two parameters solved the problem, thank you for answering! it helped me!) – Vision 10 Jun 27 '23 at 16:11
0

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; }
Vision 10
  • 13
  • 5