Déric Dallaire Déric Dallaire - 1 year ago 54
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

Answer Source

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

Example: Codepen

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download