Font awesome 4/5 icons are show up correct

Question

I use Font Awesome and 4/5 icons are show correct, but last one (stackoverflow icon, does not show):

HTML:

<ul>
  <li><a href="#"><i class="xcon-facebook"></i></a></li>
  <li><a href="#"><i class="xcon-twitter"></i></a></li>
  <li><a href="#"><i class="xcon-linkedin"></i></a></li>
  <li><a href="#"><i class="xcon-instagram"></i></a></li>
  <li><a href="#"><i class="xcon-stackoverflow"></i></a></li>
</ul>

CSS:

.xcon-facebook:before { content: '\f09a'; } /* '' */
.xcon-twitter:before { content: '\f099'; } /* '' */ 
.xcon-linkedin:before { content: '\f0e1'; } /* '' */
.xcon-instagram:before { content: '\f16d'; } /* '' */
.xcon-stackoverflow:before { content: '\f16c'; } /* '' */

How they look:

here

So i tried to change this line, like this:

.xcon-stackoverflow:before { content: '\f16c'; font-family: 'Font Awesome 5 Free';} /* '' */

Without change.

Could you try `font-family: 'Font Awesome 5 Brands';`? – Chris Aug 21 '18 at 08:04 — Chris, Aug 21 '18 at 08:04

score 1 · Answer 1 · answered Aug 21 '18 at 08:09

stack-overflow belongs to "Brands icons" so you need to include the right font-family:

.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.foo::before {
  /* won't work */
  font-family: "Font Awesome 5 Free"; content: "\f16c";
}

.bar::before {
  /* works */
  font-family: "Font Awesome 5 Brands"; content: "\f16c";
}

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<nav>
  <ul>
    <li><span class="icon foo"></span></li>
    <li><span class="icon bar"></span></li>
  </ul>
</nav>

score 0 · Accepted Answer · edited Aug 21 '18 at 08:11

Use Brands instead of Free

To set them in one line(as in image) use display:flex;

.xcon-facebook:before { content: '\f09a'; font-family: 'Font Awesome 5 Brands'; }
.xcon-twitter:before { content: '\f099'; font-family: 'Font Awesome 5 Brands'; } 
.xcon-linkedin:before { content: '\f0e1';  font-family: 'Font Awesome 5 Brands'; }
.xcon-instagram:before { content: '\f16d'; font-family: 'Font Awesome 5 Brands'; } 
.xcon-stackoverflow:before { content: '\f16c'; font-family: 'Font Awesome 5 Brands'; } 
ul{
display:flex;
 list-style: none;
}
li{
padding:5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<ul>
  <li><a href="#"><i class="xcon-facebook"></i></a></li>
  <li><a href="#"><i class="xcon-twitter"></i></a></li>
  <li><a href="#"><i class="xcon-linkedin"></i></a></li>
  <li><a href="#"><i class="xcon-instagram"></i></a></li>
  <li><a href="#"><i class="xcon-stackoverflow"></i></a></li>
</ul>

I dont know why, but the key is in both, link href to fontawesome version 5 and `font-family`, but i am curious, why others worked fine ? — Abdullah Javar, Aug 21 '18 at 08:30
@AbdullahJavar share your full code with all the include so we can see exactly like you and you will get a clear answer for the *why* — Temani Afif, Aug 21 '18 at 08:33
for me nothing work with `Free`:https://jsfiddle.net/cf58y1z3/ — לבני מלכה, Aug 21 '18 at 08:33

Font awesome 4/5 icons are show up correct

2 Answers2