Font Awesome v6 Pseudo Elements Issue

HTML

<script src="https://kit.fontawesome.com/915c8771de.js"></script>
<div class="fundraisingReason frIcon">
    <h3>Title</h3>
    <p>
            
        Lorem Ipsum
                
    </p> 
</div>

<div class="fundraisingReason frIcon">
    <h3>Title</h3>
    <p>
            
        Lorem Ipsum
                
    </p> 
</div>
            
<div class="fundraisingReason frIcon">
    <h3>Title</h3>
    <p>
            
        Lorem Ipsum
                
    </p> 
</div>

CSS

.fundraisingReason {
                
  width:90%;
  margin:25px auto;
  padding:20px 10px;
  background-color:#fff;
  border-radius:7px;

}

.fundraisingReason::before {

  position: absolute;
  margin-top: -40px;
  margin-left: -30px;
  border-radius: 50px;
  background-color: #fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:auto;
  height: 50px;
  width: 50px;
  font-size: 22pt!important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

}
.fundraisingReason:nth-of-type(1) {
                
  border:3px solid #00a8fe;

}

.fundraisingReason:nth-of-type(2) {

  border:3px solid #feea00;

}

.fundraisingReason:nth-of-type(3) {

  border:3px solid #00cb10;

}

.frIcon:nth-of-type(1)::before {

  border:3px solid #00a8fe;
  font:var(--fa-font-solid);
  content:"\e529";

}

.frIcon:nth-of-type(2)::before {

  border:3px solid #feea00;
  font:var(--fa-font-solid);
  content:"\f201";

}

.frIcon:nth-of-type(3)::before {

  border:3px solid #00cb10;
  font:var(--fa-font-solid);
  content:"\f1e3";

}