font-awesomeの色が紫色に勝手になってしまう件について

Question

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

初めまして、cssで先程font-awesomeの色を白色に指定していたのですが気づいたら紫になってしまっていてどうやったら治るか教えて頂きたいです。

エラーメッセージ![イメージ説明](2c4df41fd7046072320ca38819e0866d.png)

該当のソースコード

ソースコード　![![イメージ説明](4794a6fceb57901a3c2644427ea92cce.png)](35bf96907a56e0ec26fed5b17e56c3ee.png)


cssになりますが貼らせていただきます。
!

貼れてないですかね・・・どうやったらはれるんでしょうか画像の挿入から推してるんですけど；；[イメージ説明]

.icons{
    display:flex;
    width: 500px;
    margin:0 auto;
    text-align: center;
}

.icons li{
    list-style: none;
    padding:0 20px;
    display: block;
    margin: 0 auto;
}


  .icons li {
    border-radius: 2px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    text-align: center;
    width:80px;
 }
 

 .icons a{
    display: inline-block;
  
}
 .icons a{
   padding:0 10px;
 }

   .icons li a:hover{
    color: #fff;
  }


  .instagram:hover { 
    background: linear-gradient(to right, #5478f2 0%, #f23f79 80%, orange 100%);
    transition: 0.3s;
}
.twitter:hover { 
    background-color: #55acee; 
    transition: 0.3s;
     }
.gmail:hover{ 
    background-color: #FF773E; 
    transition: 0.3s;
}


### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[tmsw]

紫っぽい色が#f23f79しかないので何となく分かりましたが画像が貼れてないです。
```css
コード
````
の下に画像は貼ってください。

[退会済みユーザー]

分かりましたすこしおまちください

[tmsw]

ソースコードの所に貼ってしまうから見えないのです。
```css
コード
````
の上下の行にカーソルをやって画像の貼り付けをしてください

[退会済みユーザー]

腫れましたすみません！

[tmsw]

間違いなく該当ソース外のソースコードによる不具合です。
他に気づくまでに弄ったソースコード等はありませんでしたか？

[tmsw]

補足ですが何故該当ソース外のソースコードの不具合だと言い切れるかと言うと
画像のアイコンの色である#542188もその近辺の色も指定されてないからです。
つまる所、どこかを#542188の色、もしくはその近辺の色にしてあるはずでその付近が不具合の原因と考えています。

[退会済みユーザー]

ちょっと難しくていわれてもモヤモヤしているのですが見たいソースコードとかはないでしょうか。。。
あまり近辺のカラーコードはいじってないと思います・・・

[tmsw]

色を弄った所や親要素が同じ子要素のプロパティを弄ったりしませんでしたか？

[退会済みユーザー]

ごめんなさいあんまり覚えてないです…
いじったとしたらブロック要素とかを幅かえたりとかだったかもです

[tmsw]

分からないですね...
サイトのURLを張っていただいたりはできませんか？

[tmsw]

githubじゃなくてもソースが見れれば何でも大丈夫ですよ。
宜しくお願いします。

[退会済みユーザー]

長くなりますが送りますね。
html　一部分

<div class="portfolio">
<a href="#">
<img src="images/ポートフォリオ２.png" alt="ポートフォリオ2作品目です">
<div class="mask1"></div>
<div class="mask2"></div>
<div class="caption">

<p>
【Category】オリジナル作品
<br>
<br>
【Title】ブログ型サイト
<br>
<br>
【Skill】HTML,CSS,JQuery
<br>
<br>
【Detail】ブログサイトにて「情報発信」や「集客」が可能です。

</p>
</div>
</div>
</a>

[退会済みユーザー]

cssはこちらになります

.contact-wrapper{
padding-bottom:100px;
}

.contact-text{
font-size:20px;
text-align: center;
padding-bottom:60px;
}

.icons{
display:flex;
width: 500px;
margin:0 auto;
text-align: center;
}

.icons li{
list-style: none;
padding:0 20px;
display: block;
margin: 0 auto;
}

.icons li {
border-radius: 2px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
text-align: center;
width:80px;
}

.icons a{
display: inline-block;

}
.icons a{
padding:0 10px;
}

.icons li a:hover{
color: #fff;
}

.instagram:hover {
background: linear-gradient(to right, #5478f2 0%, #f23f79 80%, orange 100%);
transition: 0.3s;
}
.twitter:hover {
background-color: #55acee;
transition: 0.3s;
}
.gmail:hover{
background-color: #FF773E;
transition: 0.3s;
}

[退会済みユーザー]

長文連続でお見せしてすみません；；

[tmsw]

全く長文とは思わないのですが現状だとこれ以上探しようがないので、
テストで公開して再度質問された方が良いかと思います。

[hope_mucci]

https://teratail.com/questions/340526
全く同じ質問ではないでしょうか？

[maisumakun]

> 長くなりますが送りますね。

これだけの情報では不足です（アイコンを表示する部分自体が確認できません）。

[退会済みユーザー]

ありがとうございます！
必要な箇所送ります今仕事場にいるので持ってない部分の範囲が必要でしたら帰ってからになりますが...

[退会済みユーザー]

今気付いたのですが、焦ってて違う部分のコード送ってしまっていました。。
多分ですがi＝fab辺りのコートが要りますよね？

Answer 1

Failed to load resource: net::ERR_FILE_NOT_FOUND
ソースを検証欄から見ていたらこちらのようなエラーは見つかりました

Comments

[tmsw]

それの良し悪しは別の話ですが、紫になってしまった事とは別問題と思っていただいて大丈夫です。

仮にそれが関わってたとしたらアイコンが表示されず真っ白になっています。

[退会済みユーザー]

どうしたらよろしいでしょうか？解決方法がわかりません・・・

Answer 2

調査方法

検証ツールで当該SNSのアイコンを選択肢、Stylesの横にあるComputedタブのcolor欄を見てください。
適用されている値とどのCSSでセットされているかが分かります。
下記スクリーンショットを参考にしてください。

質問文の画像はうまく貼れていませんがとりあえずURL直打ちで見ました。
色は#542188 なので#542188でソースを全文検索すると何か見つかるかもしれません。
（不透明度を設定してたらダメですが）

Comments

[退会済みユーザー]

ごめんなさい検証ツールで見てみたんですがcolor欄がそもそもなかった気がします。。。

[hope_mucci]

その場合は、computedタブの一番上のほうに「show all」というチェックボックスがあるので、これをチェックしてください。colorは出るはずです。

[退会済みユーザー]

colorを全部指定したさきをおくればいいですかね？

[hope_mucci]

質問文にcolorの中身が全部見れるようなスクリーンショットを貼ってください。
（本来はcolorの中身を見た際に自力で気づかなければいけないのですが）