WordPressのデフォルトの「検索」ボタンをAwesomeアイコンに

WordPressウィジェットに設置されたデフォルトの「検索」ボタンはちょっと味気ないので、虫眼鏡アイコンに置き換えたい場合の手順です。

contents

使用するファイル
- 事前準備
  - Font Awesomeへ登録
- ファイルの編集

使用するファイル

HTML
JavaScript
CSS

事前準備

Font Awesomeへ登録

登録は面倒に感じられるかもしれませんが、無料で使用できるアイコンもたくさんありますので、今後ずいぶん重宝すると思います。（CSSの疑似要素を使って、アイコンを追加することも可能です。）
Font Awesomeにて、「Start for Free」を選択後、メールアドレスを登録します。
メール認証、パスワード設定と進んでいくと、コードが発行されますのでコピーして控えておきます。

ファイルの編集

HTML

jQuery、Font Awesome、cssを読み込みます。

<head>
  ～（略）～
  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/発行されたコード.js" crossorigin="anonymous"></script>
  <!-- css -->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> 
</head>

～（略）～
  </footer>
  <?php wp_footer(); ?>

  <!-- js -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script> // ディレクトリやファイル名は適宜変更
</body>

JavaScript

$(document).ready(function () {
   $('aside input[type="submit"]').val(""); // デフォルトの「検索」削除
   $('aside input[type="submit"]').before('<i class="fas fa-search"></i>');　// 「検索」アイコン挿入
});

CSS

i.fas.fa-search {
  transform: translate(0.8rem, 0.8rem); //元々あった検索ボタンの位置に移動
}

input#searchsubmit {
  width: 3rem; // 幅を指定しておかないとボタンの幅がなく押せなくなるため、アイコンが収まる程度に設定
  margin-left: -1.5rem;
  padding: 0;
  border: none;
  background-color: transparent;
  z-index: 1; // 元の「検索」ボタンが、後から追加したアイコンに重なって機能しなくなるため
}

widthやtranslateやmarginの数値は、デザインに合わせて適宜調整してください。
style.cssの最後の {z-index: 1;} は忘れずに。