SVGファイルの色の指定について

Question

svgファイルの色を変えることが出来ず困っています。

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

<div class="header-logo"><img src="img/airbnb-brands.svg" width="32px" height="32px" fill="red"></div> や cssで.header-logoで色指定しても変わりません。

sagファイルをdlせずに
<i class="fas fa-check"></I>
だとcssで問題なく色も変えれるのですが、

<i class="fas fa-check"></I>だとアイコンが表示されたら良いのですが、
表示されない時はsvgファイルとしてdlします。

なぜ表示される時もあれば、dlしないダメな時もあるのかも疑問です。

初歩的な質問で申し訳ありません、分かりましたら回答の方よろしくお願いします。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
また質問テンプレート文言が多く残っており、どれが要件なのか読み取りづらくなっています。
質問要件と関係ない文言は削ってください

Answer 1

FontAwesome 5でairbnbのようなブランドアイコンを出したい場合、クラス名は"fas fa-airbnb"ではなく、"fab fa-airbnb"とブランド用のfabを指定する必要があります。

Comments

[tka328]

早速の回答有難うございました。
後程試してみます！

Answer 2

svgファイルをCSSで色変更したい時に＜img＞タグで読み込むと変更することが出来ません。

なので、<img>タグで入れてもベクターとして表示してくれるjsを入れると便利です。

deSVG

ここからJSをダウンロードして、以下のように指定します。

<script src="path/to/desvg.js"></script>
<script>
$(function(){
  deSVG('.icon_svg', true);
});
</script>

<img class="icon_svg" src="img/airbnb-brands.svg" width="32px" height="32px">

.icon_svg path{
	color: #fff;
	fill: currentColor;
}

Comments

[tka328]

丁寧に有難うございます、戻って試してみたいと思います。

Answer 3

https://saruwakakun.com/html-css/basic/font-awesome
サルカワさんのサイトにありました。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> の一文をhead内に入れる事で、SVGファイルをＤＬせずとも表示できました。

これだとCSSで色指定が可能でした、ただAibnbのロゴは　？　！の点滅で表示されないです。
もう少し調べてみます。