Font Awesome 5 - Why Aren't Icons Like Bitcoin, Facebook, Twitter Showing

.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>

Some font awesome brands don't work (show square) event though other work fine

You're mixing the Font Awesome 5 stylesheet with Font Awesome 4 syntax. The problem can be fixed in one of two ways:

1. Load a stylesheet for an older version, or preferably
2. Double check your class names and be sure to use the current standard.

Why do I have blank squares for some icons when using font awesome?

You are using an old class. The latest Font Awesome uses the class "fab fa-icon-name" So adding b to your class works.

 <div class="col-md-1 d-flex flex-column justify-content-center align-items-center">
  <i class="fab fa-searchengin"></i>
  <span>SEO</span>
</div>
<div class="col-md-1 d-flex flex-column justify-content-center align-items-center">
  <i class="fab fa-facebook-square"></i>
  <span>Social</span>
</div>

JS Fiddle: https://jsfiddle.net/1n74q20u/

---

Related Topics