Déric Dallaire Déric Dallaire - 4 months ago 8
CSS Question

Why can't I use Font Awesome Icons within my div tag?

I've been trying to use Font Awesome icons within a card I made. Unfortunately, they simply do not appear anywhere within the div of my card. I'm thinking it has something to do with this the

.card
class
:before
selector considering it works without it.

Any idea how I can have icons in my card without altering the design?

.card :before {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #eee;
box-shadow: 0 3px 2px rgba(52, 152, 219, 0.16);
border-radius: 30px;
font-size: 22px;
font-style: normal;
left: 50%;
line-height: 60px;
position: absolute;
top: -30px;
width: 60px;
color: #3498db;
content: "AA";
font-family: 'Roboto', sans-serif;
}


Here's a Codepen

Answer

As Sayed Rafeeq said. You could use the code of the user icon instead of the fa-user class, which is 

Example: Codepen