ボタンクリック時にアイコンを変更する方法

JavaScriptを使用した方法:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <button id="myButton" onclick="changeIcon()">ボタン</button>
  <script>
    function changeIcon() {
      var button = document.getElementById("myButton");
      button.innerHTML = "<i class='fa fa-check'></i> ボタン";
    }
  </script>
</body>
</html>

jQueryを使用した方法:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">ボタン</button>
  <script>
    $(document).ready(function() {
      $("#myButton").click(function() {
        $(this).html("<i class='fa fa-check'></i> ボタン");
      });
    });
  </script>
</body>
</html>

CSSを使用した方法:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <button id="myButton" onclick="this.classList.toggle('active')">ボタン</button>
</body>
</html>

.active:before {
  content: "\f00c";
  font-family: "FontAwesome";
}

上記のコード例では、1つ目の方法は純粋なJavaScriptを使用してボタンのinnerHTMLを変更します。2つ目の方法では、jQueryを使用してボタンのinnerHTMLを変更します。3つ目の方法では、CSSの:before疑似要素を使用してアイコンを追加します。

これらの方法は、ボタンクリック時にアイコンを変更するための一般的な手法です。必要に応じて、アイコンのクラスやスタイルを調整してください。また、FontAwesomeなどのアイコンフォントを使用する場合は、適切なライブラリを読み込む必要があります。

以上が、ボタンクリック時にアイコンを変更する方法のいくつかの例です。ご参考までにどうぞ。