推奨のSVG with JSは手軽で便利だけれど、擬似要素で使うのがすこし面倒なのと、表示スピードがやや遅いので、Web Fonts with CSSを使うことが多い。

Freeを擬似要素で使うときには、
https://use.fontawesome.com/releases/v5.0.6/css/all.css
の中にある

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1

に加えて、

content: '\f138';
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;

の3行を擬似要素に指定しなければならない。
freeはfont-weightが900しかないのでこれを指定しないとフォントが表示されない。