特定のcssだけ反映されません。

発生している問題・エラーメッセージ

vscodeにてコーポレートサイトの練習をしてい
ます。fontawesomeにてアイコンを使用し、cssの装飾で色を変えたいのですが指定しても＊で指定したコードの色が反映されてしまい、アイコンにだけかかりません。
h3タグで囲ったところは色が変わり、反映されているのでcssが機能してないということはないのですが…。

該当のソースコード

---HTML---
(一部抜粋してコピーしています)

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><h3>Disneyworld1</h3></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse d-flex justify-content-end" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-home"></i>Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-home"></i>Service</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Infomation</a> </li> </ul> </div> </nav>

---CSS---
*{
margin: 0;
padding: 0;
color: green;
}

.top-img{
background-image: url(../img/img01-1024x682.jpg);
background-size: cover;
}

.top-text{
text-align: center;
padding: 250px 0px;
}

.top-text h1{
font-size: 100px;
font-family: 'Dancing Script', cursive;
}

nav h3{
font-family: 'Dancing Script', cursive;
color: gray;
}

nav i{
color: red;
}

cerfweb

2020/12/04 10:58

Fontawesomeは複数の読み込み方がありますが、どのようにされていますか。

kinakoprince

2020/12/04 11:34

scriptタグをheadの中に入れ、読み込んでいます。

cerfweb

2020/12/04 11:42

all.jsかall.min.jsですか。

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

回答1件

ベストアンサー

FontawesomeのSVG with JavaScriptを使用されているとしたら、<i class="fas fa-..."></i>の部分はJSによってSVGに置換されているはずなので、その時点でnav iは効かなくなります。さらに、*{color: green;}とされているので、SVGの中のpathがその影響を受けてしまうという仕組みです。
ブラウザのソースをご確認ください。
その部分だけを解決するにはnav i {...}の代わりに

css
1nav svg path{
2    color: red !important;
3}

とすれば取り敢えずは解決するのではと思われます。

ですが、思わぬ要素が影響を受けないよう、*{color: green;}とするのはやめて、文字色の指定はbodyか他の要素に対して設定しておいた方が無難です。
また、Fontawesomeのアイコンに色をつけるには例えば

css
1.text-red {
2    color: red;
3}

html
1<i class="fas fa-home text-red"></i>
2または
3<span class="text-red">
4    <i class="fas fa-home"></i>
5</span>

とするのがお勧めです。

投稿2020/12/04 13:05

cerfweb

総合スコア1907

kinakoprince

2020/12/04 13:26

ありがとうございます!!!めちゃくちゃ初心者で、JSにはまだ手を付けておらず、Bootstrap,CSS,HTMLだけで作成していました。にもかかわらず、Fontawesomeのをscriptで読み込みをしてしまっていたのが原因だったようです。 JSの特性についても丁寧に説明して頂き、何故そうなってしまったのか分かりやすかったです!!! とりあえず読み込みを<link rel~>に直すと思っていたように修正できました。大変丁寧に回答いただきありがとうございました!!!

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