Déric Dallaire Déric Dallaire - 2 months ago 5
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

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


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

Example: Codepen