[Solved]-How to get Font Awesome Icon in react app for a pseudo element in css-Reactjs

Use a SVG as a background image:

.angle-after:after {
  display: block;
  content: '';
  background-image: url('../../node_modules/@fortawesome/fontawesome-pro/svgs/light/angle-right.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}

You can simply use font-awesome in css class before or after

try this code:

.class-name:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f1ea";
    position:absolute;
    color:#ccc;
    top:0;
    right:0;
    font-size:25px;
    font-weight:500;
    z-index:-1;
    opacity:0.5;
}

if not working please make sure are you installed fontawesome library

How install? check here >>

Nothing to do with React

Bold fonts, won't show up until you put in the right font-weight

Issue Example

.test {
  font-size: 5em;
}

.test:after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  content: '\f101';
}

<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" />
<div class="test"></div>

Fix

Added font-weight: 900;

.test {
  font-size: 5em;
}
.test::after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  content: '\f101';
  font-weight: 900;
}

<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" />
<div class="test"></div>