Font-awesome unicode not working for version 5.11.2

Question

I have the following code and from it, I'd really like to help me with the following:

Why are the icons not showing up (it only shows a square)? I used the same code with Font Awesome 4.7.0 and it works fine. However, it does not for this version (5.11.2).

Thanks in advance for your help!

$(document).ready(function() {
  $('.toggle').click(function() {
    $('.toggle').toggleClass('active');
    $('.toggle-content').toggleClass('active');
  });
});

.hidden {
  overflow: hidden;
}

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.wrapper {
  background-color: pink;
  position: relative;

  display: flex;
  align-items: center;
}

.toggle {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;

  &:before {
    content: '\f085'; // fas fa-cogs
        font-family: fontAwesome;
  }
}

.toggle.active {
  background-color: red;

  &:before {
    content: '\f00d'; //fas fa-times
  } 
}

.toggle-content {
  display: none;
}

.toggle-content.active{
  display: block;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
  left: 0;
}

<div class="container">
  <div class="wrapper">
    <div class="toggle"></div>
    <div class="toggle-content">
      <p>Some content</p>
    </div>
  </div>
</div>

Here's the link to my CodePen in case you find it easier: https://codepen.io/fergos2/pen/yLLgBRq

P.S.: I am using SCSS as a CSS preprocessor and the CSS link to font-awesome is included in my CodePen.

@Paulie_D the code comes from my CodePen. I included the link there. — GBeck, Oct 21 '19 at 11:46
check the duplicate if you want to understand the font-weight trick — Temani Afif, Oct 21 '19 at 12:54

score 1 · Accepted Answer · answered Oct 21 '19 at 11:46

1

.toggle::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";
}

Use double colons for using before.

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

answered Oct 21 '19 at 11:46

Amanjot Kaur

2,028
4
18
33

I tried this in the past but without the font-weight. I noticed that by adding the font-weight it does work. Would you mind explaining why? – GBeck Oct 21 '19 at 11:51
font-family: "Font Awesome 5 Free"; Font awesome provides this library for pseudo-elements. This font family is available for free. Check the link I had shared in the post. That link contains all details. – Amanjot Kaur Oct 21 '19 at 11:54
Plz accept the answer if it works for you. Thanks – Amanjot Kaur Oct 21 '19 at 11:56
it has partially worked as it has two parts – GBeck Oct 21 '19 at 11:58
what your other question that has not worked? – Amanjot Kaur Oct 21 '19 at 12:02
I want to use font-awesome classes and not unicode, that is what I've used, but I don't know how to use classes for toggles – GBeck Oct 21 '19 at 12:10
No, You cant add HTML or classes in content in CSS stylesheet. – Amanjot Kaur Oct 21 '19 at 12:19
I am aware of that. I'll try to post a clearer question for that part. Thanks – GBeck Oct 21 '19 at 12:21
You can use the panel https://codepen.io/nhembram/pen/XKEJJp – Amanjot Kaur Oct 21 '19 at 12:22

Font-awesome unicode not working for version 5.11.2

1 Answers1