Q:

going from font-awesome v4 to v5

I've been using some responsive template for a while now but would like to upgrade its fa-module from v4 to v5.  after downloading the free web package and swapping "font-awesome.min.css" with "all.min.css" and adapting all references to the new font folder, I can use all new fa-icons with "<span class="fa fa-..."></span>" (or far, fas, fab prefixed).  good. 
What I can't get to work properly is using v5 icons with additional styles, eg class="icon ..." or class="feature ...". 
only the v5 solid family gets displayed when I explicitly set
.icon:before { ... font-weight: 900; ... } or .feature:before { ... font-weight: 900; ... }.  icons from the other 2 families get displayed as a square box showing the icon's hex code only. 
when I set a weight of "400", only icons from the v5 regular family are displayed and the solid ones show up as squares with hex codes.  whatever weight I set, the v5 brands family icons never show up. 
So how can I access the icons from the brands family or from all 3 families alike? 
Thanks for any hints...

A:

Basically you need to tell the browser which Font Awesome family you want to use.  Just like if you wanted Arial vs Times to display text on your site. 
In your code block you should say:
.icon:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

In the case of Font Awesome, it's a combination of font-family and font-weight that produce the different looks. 

The real issue is that you're using the free version of FA which only includes the "solid" and "Brands" styles by specifying the 900 weight and the 400 weight.  The features you're requesting are part of the Pro version. 

Here's FA's Documentation on this issue.