React Fontawesome CSS pseudo element not rendering inside div but works in Codepen

Question

I'm running a React application and I need to render a FontAwesome icon inside of a select form field like in this Codepen

To achieve this, I'm using CSS Pseudo Elements, :after to be specific as defined here

Unfortunately, this works well inside of this CodePen but it doesn't render inside the div on my app. I get a box to show that the FontAwesome icon didn't render and the actual icon appears after the select input. See image below for what it looks like.

CSS

.selectdiv {
  position: relative;
}

.selectdiv:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  color: rgb(75,173,233);
  right: 0rem;  
  top: 0.3rem;
  height: 2rem;
  padding: 0rem 0rem 0rem  0rem;
  position: absolute;
  pointer-events: none;
}

/* IE11 hide native button*/
select::-ms-expand {
  display: none;
}

.selectdiv select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: rgb(75,173,233);
  background-color: #ffffff;
  background-image: none;
  -ms-word-break: normal;
  word-break: normal;
}

index.html

 <!-- FontAwesome Pseudo Elements Config -->
    <script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js" data-search-pseudo-elements></script>  
    <script>
      window.FontAwesomeConfig = {
        searchPseudoElements: true
      }
    </script>

the codepen is using the old version of fontawsome and you are using the new one, you need to adjust the code of the icon — Temani Afif, Jan 30 '20 at 00:59

score 0 · Answer 1 · answered Jan 31 '20 at 03:17

Found an answer here

I followed the 'old way'.

I add this line to index.html

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

and my CSS now looks like this

.selectdiv {
  position: relative;
}

.selectdiv::after {
  font-family: "Font Awesome\ 5 Free";
  content: "\f107";
  font-weight: 600;
  color: rgb(75,173,233);
  right: 0rem;
  top: 0.3rem;
  height: 2rem;
  padding: 0.2rem 0rem 0rem  0rem;
  position: absolute;
  pointer-events: none;
}


/* IE11 hide native button*/
select::-ms-expand {
  display: none;
}

.selectdiv select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: rgb(75,173,233);
  background-color: #ffffff;
  background-image: none;
  -ms-word-break: normal;
  word-break: normal;
}

React Fontawesome CSS pseudo element not rendering inside div but works in Codepen

1 Answers1