Question 195255 in CSS Question posted in
Some basic documentation can be found here.

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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; }

  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search