font-awesomeのアイコンが表示されない

Question

###困っていること

::beforeの擬似要素で与えたfont-awesomeのアイコンが◻︎の表示になってしまいます。
CSSは以下です。
考えられる原因を教えてください。

.contents .contents-body .ref:before {
    display: inline-block;
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    background: #585858;
    color: #FFF;
    font-size: 18px;
}

headにkit.fontawsome.com/~.jsを読み込ませて使っています。
before要素以外のアイコンはちゃんと表示されています。

追記
色々試してみたところ、
headに<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
を書いて読み込むとsafariのみ正しく表示されて、
<script src="https://kit.fontawesome.com/hogehoge.js" crossorigin="anonymous"></script>
で読み込むとsafariもchromeも表示されないようです。困ってます…

Answer 1

Solid スタイルは font-weight: 900; なので指定してください。
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

公式ドキュメントにあるように疑似要素による指定よりは表のとおりにタグをコピーするのが間違いがなくて簡単です。

<i class="fas fa-quote-left"></i>

https://fontawesome.com/icons/quote-left?style=solid

Comments

[sodiumplus3]

font-weightを指定しないといけなかったんですね！直りましたありがとうございます。