Font Awesome not working in CSS pseudocode

Question

I'm using Font Awesome through a kit and it's not working when I use it as a pseudo-element in CSS

<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/af3b78fe80.js" crossorigin="anonymous"></script>

This is the HTML code block where class toggle is declared. The div is empty <div class="toggle"> </div>

The CSS for .toogle:

.toggle{
    position: relative;
    width: 60px;
    height: 60px;
    background-color: #da7f8f;
    cursor: pointer;
}
.toggle ::before{
    content: '\f0c9';
    font-family:"Font Awesome 5 Free";
    position: absolute ;
    width: 100%;
    height: 100%;
    line-height: 60px;
    font-size: 24px;
    font-weight: 900;
    color: black;
    
}

You can also use a code editor with a CSS Lint... it would have cautch the error, explained you why and also saved us all some time :), happy coding. See: [Css Lint](https://www.google.com/search?q=what+is+css+lint) — caiovisk, May 18 '21 at 05:42

score 1 · Accepted Answer · answered May 18 '21 at 05:36

You have an extra space between .toggle and ::before.

.toggle{
    position: relative;
    width: 60px;
    height: 60px;
    background-color: #da7f8f;
    cursor: pointer;
}
.toggle::before{
    content: '\f0c9';
    font-family:"Font Awesome 5 Free";
    position: absolute ;
    width: 100%;
    height: 100%;
    line-height: 60px;
    font-size: 24px;
    font-weight: 900;
    color: black;
    
}

<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/af3b78fe80.js" crossorigin="anonymous"></script>
<div class="toggle"></div>

Font Awesome not working in CSS pseudocode

1 Answers1