fontawesomeのフォントをbeforeで表示したい

実現したいこと

模写コーディングをしています。
liで箇条書きのドットをfontawesomeのアイコンにしたいです。

問題点、エラーコード

liにbeforeを追加してfontawesomeを使い、liのドットをアイコンに変えたいと思いました。しかし、以下のように記述すると、四角が出てきてしまい、正常に表示されません。。
どうしたら正常にフォントを出現させられるでしょうか？
beforeの部分は、
font-family:Font Awesome 5 Free;
content:"\f00c";を記述しています。
また、headで読み込んでいるのは<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">です。
以下、現在の画面です↓

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="responsive.css">
9   
10
11    <link rel="stylesheet" href="style.css">
12    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
13      <!-- Bootstrap CSS -->
14      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
15
16   
17    <title>airbnb</title>
18  </head>
19
20  <body>
21 
22      <div class="instru">
23        <h1>万一のときも安心です</h1>
24        <div class="instru-2">
25          <div class="content">
26            <p>   大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>   
27           <a href="#">ホストを守るAirbnbの仕組みをチェック</a>
28          </div>
29          <ul>
30            <li>予約前に政府発行の身分証明書を求める権限</li>
31            <li>ハウスルールに同意しないと泊まれない</li>
32            <li>過去の宿泊のレビューもばっちり読める</li>
33            <li>財物損害は¥100,000,000まで無料で補償</li>
34            <li> $1,000,000の賠償責任保険が無料で付帯</li>
35            <li>24時間365日対応グローバルカスタマーサポート</li>
36          </ul>
37       </div>
38        <img src="image/lefkada-3678517__340.jpg">
39     </div>
40     <hr>
41  </body>
42</html>

css
1/*
2html5doctor.com Reset Stylesheet
3v1.6.1
4Last Updated: 2010-09-17
5Author: Richard Clark - http://richclarkdesign.com
6Twitter: @rich_clark
7*/
8
9html, body, div, span, object, iframe,
10h1, h2, h3, h4, h5, h6, p, blockquote, pre,
11abbr, address, cite, code,
12del, dfn, em, img, ins, kbd, q, samp,
13small, strong, sub, sup, var,
14b, i,
15dl, dt, dd, ol, ul, li,
16fieldset, form, label, legend,
17table, caption, tbody, tfoot, thead, tr, th, td,
18article, aside, canvas, details, figcaption, figure,
19footer, header, hgroup, menu, nav, section, summary,
20time, mark, audio, video {
21    margin:0;
22    padding:0;
23    border:0;
24    outline:0;
25    font-size:100%;
26    vertical-align:baseline;
27    background:transparent;
28}
29
30body {
31    line-height:1;
32    font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
33}
34
35nav ul {
36    list-style:none;
37}
38
39blockquote, q {
40    quotes:none;
41}
42
43blockquote:before, blockquote:after,
44q:before, q:after {
45    content:'';
46    content:none;
47}
48
49a {
50    margin:0;
51    padding:0;
52    font-size:100%;
53    vertical-align:baseline;
54    background:transparent;
55}
56
57/* change colours to suit your needs */
58ins {
59    background-color:#ff9;
60    color:#000;
61    text-decoration:none;
62}
63
64/* change colours to suit your needs */
65mark {
66    background-color:#ff9;
67    color:#000;
68    font-style:italic;
69    font-weight:bold;
70}
71
72del {
73    text-decoration: line-through;
74}
75
76abbr[title], dfn[title] {
77    border-bottom:1px dotted;
78    cursor:help;
79}
80
81table {
82    border-collapse:collapse;
83    border-spacing:0;
84}
85
86/* change border colour to suit your needs */
87hr {
88    display:block;
89    height:1px;
90    border:0;  
91    border-top:1px solid #cccccc;
92    margin:1em 0;
93    padding:0;
94}
95
96input, select {
97    vertical-align:middle;
98}
99.instru h1{
100  margin-bottom: 70px;
101  text-align: center;
102  font-size: 60px;
103  color: #333333;
104  line-height: 64px;
105  font-weight: 900;
106  font-style: normal;
107}
108.instru-2{
109  display: flex;
110  justify-content: space-between;
111}
112.content{
113  width: 412px;
114  color: #484848 ;
115  font-size: 16px;
116  line-height: 28px;
117  font-weight: 400;
118
119}
120
121.instru-2 ul{
122  width: 390px;
123  list-style: none;
124}
125
126.instru-2 ul li:before{
127  font-family: "Fon Awesome 5 Free" !important;
128  content:"\f00c"!important;
129}

行動規範の内容に同意します

回答2件

ベストアンサー

誤字を直して、font-weight: 900;を追加して頂ければいけると思います。
!importantはなくて大丈夫です。

css
1.instru-2 ul li::before {
2    font-family: "Font Awesome 5 Free"; /* 誤字訂正 */
3    content: "\f00c";
4    font-weight: 900; /* 追加 */
5}

投稿2020/10/11 01:16

kurazushi

総合スコア43

Sakupi

2020/10/11 01:25

回答ありがとうございます！その方法で解決いたしました！助かりました！！！なぜfontweightをいじると表示されるのかわからないので、教えていただくことは可能ですか？

kurazushi

2020/10/11 01:34

よかったです。確か近年のバージョンからアイコンに太さが強制的に紐づけられるルールになったんだったと思います。アイコンのページ（https://fontawesome.com/icons/check?style=solid）のPC画面右側に太さがありますが、これがsolidだと900で、regularだといくつ、みたいなルールです。説明サイト（https://wk-partners.co.jp/homepage/blog/hpseisaku/htmlcss/fontawesome-trouble/#index-3）がありましたのでご覧になってください。

Sakupi

2020/10/11 11:58

返信ありがとうございます！知りませんでした！！！とても勉強になります！感謝です。

行動規範の内容に同意します

html
1    <link rel="stylesheet" href="style.css">
2    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">

この二行を逆にしてみてください。

投稿2020/10/10 14:59

kyoya0819

総合スコア10429

Sakupi

2020/10/11 00:47

回答ありがとうございます！逆にしてみましたが、変化無いです。。。

Sakupi

2020/10/11 00:55

因みにですが、 font-family:'Font Awesome 5 Free';　/*シングルクオーテーションで囲む*/ content: "\f00c"; */\はバックスラッシュ*/ にしても変化ありませんでした。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！