Font Awesome icons are not working inside CSS [duplicate]

This question already has an answer here:

I have included the CSS file in my webpage like this:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">


After that, I apply the following CSS:

th:after {
font: FontAwesome;
content: "f095";
}


However, all I see is a box with fo95 written inside it. Am I doing something wrong?

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2 Answers
2

A bit. You should check out their docs on usage: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Example:

.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}

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


And the relevant html, taken from their docs.

<li><span class="icon login"></span> Login</li>


I believe you need all the styles they have listed.

You're using the wrong name for the font, it should be

font-family: "Font Awesome 5 Free";


th:after {
font-family: "Font Awesome 5 Free";
content: "f095";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
</table>