すいません。どなたか、font-awesomeをCDNで画像を入れたいのですが背景にかぶりうまく表示されず困っています。

index.html
1コード
2```<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
8    <link href=“https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=“stylesheet”>
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
10    <script src="index.js"></script>
11    <link rel="stylesheet" href="./css/style.css">
12    <title>Raise Tech</title>
13</head>
14<body>
15    
16    <header>
17        <div class="l-header">
18        <div class="left">
19        <a href="#">
20        <img src="./img/header-logo.svg" alt="RaiseTech">
21        <p>最速で<span>「稼げる」</span>プロになる<br>エンジニアリングスクール</p>
22        </a>
23        </div>
24    </div>
25        <!--/.left-->
26        <ul class="right-menu">
27                <li class="btn1">
28                    <a href="#">はじめての方へ</a>
29                    <ul class="sub-menu1">
30                        <li><a href="#">マンガでわかるRaseTech</a></li>
31                        <li><a href="#">サポート体制とトライヤル授業</a></li>
32                        <li><a href="#">就職・転職支援制度</a></li>
33                        <li><a href="#">ご利用の流れ</a></li>
34                    </ul>
35                    </li>
36                </li>
37                <li class="btn2">
38                    <a href="#">コース案内</a>
39                    <ul class="sub-menu2">
40                    <li><a href="#">マーケティングコース</a></li>
41                    <li><a href="#">デザインコース</a></li>
42                    <li><a href="#">WordPress副業コース</a></li>
43                    <li><a href="#">AWSフルコース</a></li>
44                    <li><a href="#">AWS自動化コース</a></li>
45                    <li><a href="#">Javaフルコース</a></li>
46                    <li><a href="#">Javaフレームワークコース</a></li>
47                </ul>
48        </li>
49        <li>
50            <a href="#">講師紹介</a>
51        </li>
52            <li class="btn3">
53                <a href="#">卒業生の声・実績</a>
54                <ul class="sub-menu3">
55                <li><a href="#">卒業生の声</a></li>
56                <li><a href="#">転職案件実績</a></li>
57            </ul>
58        </li>
59    </li>
60        <li class="btn4">
61            <a href="#">メディア</a>
62            <ul class="sub-menu4">
63                <li><a href="#">動画一覧</a></li>
64                <li><a href="#">記載記事一覧</a></li>
65            </ul>
66        </li>
67        <li class="btn5">
68            <a href="#">サポート</a>
69            <ul class="sub-menu5">
70                <li><a href="#">よくあるご質問</a></li>
71                <li><a href="#">お問い合わせ</a></li>
72
73            </ul>
74        </li>
75        <li>
76        <a class="btn6">受講お申し込み</a>
77    </li>
78</ul> 
79        
80
81        <!--/.right-->
82    </header>
83    <div class="content">
84        <div class="content-item">
85            <img src="/img/header-logo.svg"　alt="RaiseTech">
86            <p>はじめまして。RaiseTech（レイズテック)は<br>
87                最速で「稼げる」エンジニアになるための、<br>
88                実践的なWebエンジニアリングスクールです
89            </p>
90            <a href="#">マンガでわかるRaseTech</a>
91        </div>
92    </div>
93    <div class="sec sec-black sec-nallow sec-recommendation">
94        <i class="fas fa-dumbbell"></i>
95    </div>
96</body>
97</html>```style.scssここに言語を入力
98コード
99```* {
100    margin: 0;
101    padding: 0;
102    box-sizing:border-box;
103    text-decoration: none;
104    list-style-type: none;
105}
106html{
107    font-size: 62.5%;
108}
109
110body {
111    background-image:url(../img/bg-hero3.png);
112    width: 100%;
113    -webkit-tap-highlight-color: rgba(0,0,0,0);
114    text-size-adjust: 100%;
115    line-height: 27.2px;
116    font-size: 16px;
117    font-weight: 400;
118    line-height: 1.7;
119    font-family: "Noto Sans JP",MyYuGothicM,YuGothic,-apple-system,BlinkMacSystemFont,"Hiragino kaku Gothic ProN",Meiryo,Verdana,arial,helvetica,sans-serif;
120    a{
121        display: block;
122    }
123
124    header{
125        display: flex;
126        justify-content: space-between;
127        height: 70px;
128        width: 100%;
129        background-color: #fff;
130        position: fixed;
131        z-index: 1100;
132    }
133
134    
135
136}
137
138.l-header{
139        a{
140    height: 70px;
141    padding-left: 21px;
142    display: flex;
143    align-items: center;
144    align-content: center;
145    position: fixed;
146    width: 100%;
147    background-color: white;
148    color: #000;}
149        img{
150            vertical-align: middle;
151           
152
153        }
154            p{
155             padding-left: 16px;
156             font-size: 1.4rem;
157             font-weight: bold;
158             line-height: 1.3;
159             white-space: nowrap;
160             
161             
162
163             > span{
164                 font-size: 1.8rem;
165             }
166         }
167     } 
168    
169    .right-menu{
170        height: 70px;
171        display: flex;
172        align-items: center;
173        font-size: 1.4rem;
174        font-weight: bold;
175        // display: none; スマホ対応を意識した結果書いてしまった、結果画面が消えてしまいわからなくなった。
176
177        li{
178           position: relative;
179            > a{
180                display: flex;
181                align-items: center;
182                height: 70px;
183                padding: 0 15px;
184                color: #131d34;
185            }
186        }
187
188        .btn{
189            position: relative;
190            color: #131E33;
191            // height: 70px;
192            // padding: 0 10px;
193            &6{
194                background-color: #2498b3;
195                color: #fff;
196            }
197            
198            
199            }
200        }
201        .sub-menu{
202            display: flex;
203            // line-height: 70px;
204            font-size: 16px;
205            font-weight: bold;
206        }
207
208        .sub-menu1,
209        .sub-menu2,
210        .sub-menu3,
211        .sub-menu4,
212        .sub-menu5{
213            display: none;
214        }
215
216        
217    
218    
219    .content{
220        background-image: url(../img/bg-hero1.png), url(../img/bg-hero2.png);
221        height: 100vh;
222        width: 100%;
223        background-position: 50% 20%;
224        &-item{
225            background-color: white;
226            max-width: 405px;
227            position: absolute;
228            top: 160px;
229            left: 0;
230            right: 0;
231            margin: auto;
232            padding: 10px 6px;
233            text-align: center;
234            border-radius: 8px;
235            padding: 43px 40px 19px;
236            img{
237                width: 280px;
238                margin-bottom: 0.4rem;
239            }
240            p{
241                font-size: 1.6rem;
242                font-weight: 700;
243                margin: 1.3rem 0 1.5rem;
244                line-height: 2.7rem;
245               
246            }
247            a{
248                padding: 23px 37px;
249                font-size: 18px;
250                background-color: #2498b3;
251                color: white;
252                display: block;
253                border-radius: 4px;
254                
255            }
256        }
257    }
258
259    .sec-nallow{
260        padding: 4em 0;
261        &.sec-black{
262            background-color: #000;
263            
264        }
265        &.sec-recommendation{
266            z-index: 500;
267        }
268    }

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

回答1件

ベストアンサー

<i class="fas fa-dumbbell"></i>
表示したいのはこれで合ってますでしょうか？
webフォントなので背景黒に黒文字ですと、見えません。

css
1i {
2  color: red;
3}
4
5このようにすると見えるようになるかと思います。
6まぁ、ご提示のコードのままだと見えないんですが…
7`fontawesome`の読み込み自体が上手くいっていないようなので、
8
9```html
10<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">