HTMLとCSSでアイコンをクリックしたら別のアイコンに切り替えたい

Question

写真のピンクの部分（フォントオーサムのアイコン）をクリックしたら別のアイコンに切り替えたいです。

<div class="wrappir">
  	 <div class="sidebar">

  	  <input type="checkbox" id="label1" class="csc"/>
        <label for="label1"> <i class="fas fa-bars"></i></label>
     	
<img class="sidelogo" src="logo.png" alt="店名">
          

  		<div class="side-container">
<!--ここから非表示-->
      
  		  <ul class="flex-container">
  		   <li><a href="#">TOP</a></li>
  		   <li><a href="#">MESSAGE</a></li>
  		   <li><a href="#">GALLERY</a></li>
  		   <li><a href="#">BRAND</a></li>
  		   <li><a href="#">PROJECT</a></li>
  		   <li><a href="#">COMPANY</a></li>
  		  </ul>
  		<div class="side-icon">
  			<a href="#"><i class="fab fa-facebook-square"></i></a>
  			<a href="#"><i class="fab fa-twitter-square"></i></a>
  			<a href="#"><i class="fab fa-instagram-square"></i></a>
  			<a href="#"><i class="fab fa-youtube-square"></i></a>
  		</div>
      </div>
     </div>
  	 
  </div>

@media screen and (max-width: 900px) {
    .container{
        width: 130%;
    }
    
    
    /*サイドメニューの固定解除*/
    .sidebar{
        position: static;
        width: 77%;
        background-color: green;
    }
    
    

    .sidelogo {
       margin: 0 auto;
       display: block;
       position: relative; bottom:25px;

    }
    

    .sidebar label {
       float:  right; 
       font-weight: bold;
       cursor :pointer;
       background-color: pink;
       display: block;
       font-size: 20px;
       padding-top: 15px;
       padding-right: 20px;
       transition: 0.2s;

       
    }

/*ロゴを回転させる*/
  #label1:checked ~ label{
        transform: rotate(360deg);

    }
 

/*チェックは見えなくする*/
      #label1{
       display: none;
    }

/*ロゴ以外の中身を非表示にしておく*/
    .side-container {
       height: 0;
       padding: 0;
       overflow: hidden;
       opacity: 1;
       transition: 0.8s;
    }



/*クリックして表示*/
    #label1:checked ~ .side-container {
    padding: 5px;
    height: auto;
    opacity: 1;
    display: block;
    position: absolute;
    width: 100%;
    background-color: white;
　　}

    .flex-container  li::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    }

    .flex-container  li{
        border-bottom: solid 1px #ccc;
    }

    .side-icon i{
        margin-right: 10px;
    }


    .bottom-logo{
        flex-direction: column;
        align-items: center;
    }
}

ｃｓｓで下記コードを試してみましたが、クリックしたら回転するのみでアイコンは切り替わりませんでした。どのようにすればアイコンが切り替わるのかご教授いただければと思います。

 #label1:checked ~ label{
        font-family: "Font Awesome 5 Free";
        content: "\f26e";
        transform: rotate(360deg);
    }

Comments

[cerfweb]

Fontawesomeはどのバージョンをどのように読み込んでいますか。

[dehi0923]

バージョンは６の無料版です。
HTMLのhead部分にリンクを読み込んでいます。

[cerfweb]

6.0.0-alpha1ですか。

Answer 1

よく確かめてみたら、cssの書き方が原因だということがわかりました。
SVGを使っていない場合、以下のように::beforeのところにUnicodeを指定することで任意のものが表示されます。

#label1:checked ~ label .fa-bars::before{
    font-family: "Font Awesome 5 Free";
    content: "\f00d";    /* これは.fa-times のものですが、ご希望のものに書き換えてください。*/
}

Comments

[dehi0923]

書き換えてみたところ画像は変わりました。ありがとうございます。
しかし今度はtransform: rotate(360deg);が効かなくなり、画像が回転しなくなってしまいました。この場合は何が原因なのでしょうか？

[cerfweb]

#label1:checked ~ label{
transform: rotate(360deg);
}
↑はそのまま残していますか。

[dehi0923]

解決しました。
#label1:checked ~ label .fa-bars::before{
font-family: "Font Awesome 5 Free";
content: "\f00d"; /*
}
上記のCSS内にtransformを記述してしまっていたので効かなくなっていました。
別で記述したら回転しました。
本当に助かりました。ありがとうございます。
今後ともよろしくお願いいたします。

[dehi0923]

何度も本当に申し訳ございません。
先ほどは回転して、ロゴも替わっていたのですが少し時間が経って再度
確認しましたらロゴは替わるのですが、また回転しなくなってしまいました。
なぜなのでしょうか？

[cerfweb]

ブラウザのキャッシュはクリアしてみましたか。

[dehi0923]

今クリアしてみたのですが、変化ありませんでした。
#label1:checked ~ label{
transform: rotate(360deg);
}
この記述が間違っているのでしょうか？

[cerfweb]

content: "\f00d"; /* <-- これがついたままになっていませんか。

[dehi0923]

いえ
#label1:checked ~ label .fa-bars::before{
font-family: "Font Awesome 5 Free";
content: "\f00d";
｝
と記述してるので間違ってはないと思います。一度ロゴも替わって回転もしていたのに急に回転しなくなったので何が間違っているのか分からないです。

[cerfweb]

#label1:checked ~ label{
transform: rotate(360deg);
}

#label1:checked ~ label .fa-bars::before{
font-family: "Font Awesome 5 Free";
content: "\f00d";
}
で間違いないですよね!?。ほかにcssに何か変更を加えたということはありませんか。

[dehi0923]

間違いありません。ｃｓｓの変更もしてないです。元々は
#label1:checked ~ label{
transform: rotate(360deg);
}
こちらのCSSは反応しておりロゴも回転していて、画像だけが変わらなかったのですが、transformのみが急に適用できなくなるのもおかしいですよね。

Answer 2

Fontawesome6のドキュメントは確認していないのでわかりませんが、all.jsまたはall.min.jsを読み込んでいる場合、その部分に以下の記述を入れて試してみてください。

<script data-search-pseudo-elements defer src="...

Comments

[cerfweb]

cssを見ると、バージョン5の書き方なので、6じゃなくて5のバージョンを読み込んでください。

[dehi0923]

何度もごめんなさい。
またall.jsとall.min.jsとはどこを見ればよいのでしょうか？
素人の質問で大変申し訳ございません。

[cerfweb]

Fontawesomeのjsファイル名です。もし違っていたら、読み込んでいるファイル名を教えてください。

[dehi0923]

scriptというkit codeをコピーして貼り付けています。前の回答の記述を入れてみましたが変化ありません。フォントオーサムの読み込み方が違うのでしょうか？

[cerfweb]

どんなコードですか。

[dehi0923]

<script src="https://kit.fontawesome.com/30804f74cf.js" crossorigin="anonymous"></script>このコードです。

[cerfweb]

その部分を以下に置換したらどうなりますか。
<script data-search-pseudo-elements defer src="https://use.fontawesome.com/releases/latest/js/all.js" integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7" crossorigin="anonymous"></script>

[dehi0923]

今までフォントオーサムで表記されてたアイコンが全て表示されなくなってしまいました。

[cerfweb]

<script data-search-pseudo-elements defer src="https://kit.fontawesome.com/30804f74cf.js" crossorigin="anonymous"></script>
としてもダメですか？

[dehi0923]

お返事遅れて申し訳ありません。アイコンは表示されますが、画像は変わりません。フォントオーサムの読み込みに問題があるのでしょうか？