load font-awesome icon in ::before and ::after pseudo element-CodePudding

I can't load icons from font awesome in pseudo-element. I tried to follow the docs but it didn't work.

.x::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

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

<p class="x">hello, my name is john</p>

CodePudding user response：

I think you haven't installed fontawesome kit in your html. please go here and enter your email address. They will send a verification email and then you will be provided to a link where you will find the <script> tag provided by them. copy and paste that in your html file.

CodePudding user response：

Adding the font-awesome stylesheet to your code and it will load the icon.

.x::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></link>
<p class="x">hello, my name is john</p>

CodePudding user response：

ok this problem is really easy to solve:

First thing you have to create a span tag between the
tags:

Correction: no need for span tag.

<p class="icon-classname">hello, my name is john</p>

Also another thing you have to remember is to use the link for the font-awesome in your HTML file with this link:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>

and in the css file:

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

You do not need span tag to use the font-Awesome, probably the only thing that was missing in your code is the link from font-awesome.

CodePudding user response：

You should probably explore this article

Sometimes the problem is simple ::before vs :before

I recommend that you try using :before. Everything else points out that your code should be working fine.