【HTML】検索ボタンにアイコンを設定する

こんな感じの検索ボックスを作ってみましょう。
検索ボタンは、FontAwesomeのアイコンを設定しています。

いい感じにCSSでデザインをいじって、このようにHTMLを設定すると表示できます。
フォーム全体を”search-form”、入力フォームを”search-input”、ボタンを”search-button”
って感じでクラスを定義してます。おしゃれに”:hover”とかも入れてますけど、無くても大丈夫です。

HTML

<form class="search-form" role="search" action="https://3z1k.hatenablog.com/search" method="get">
  <input type="text" name="q" class="search-input" placeholder="記事を検索..." required="">
  <input type="submit" value="&#xf002;" class="search-button">
</form>

CSS

.search-form {
    padding: 5px 10px;
    border: 1px solid #333; border-radius: 30px;
    width: 460px; max-width: 100%;

    display: flex;  justify-content: center;  align-items: center;

    background: #FFF;
    font-size: 15px;
}
.search-input {
    border: none;  background: none;  outline: none;
    width: 420px;

    color: #333;
}
.search-button {
    border: none;  background: none;  outline: none;
    color: #999;  font-weight: 900;  font-family: "Font Awesome 5 Free";

    transition: color 0.3s ease 0s;
}
.search-button:hover {
    color: #333;
}

Result

今回のポイントは、”search-button”クラスのinputタグのvalueです。
valueにはあまり見慣れないものが記述されていますが、これは「 数値文字参照 」と言われるもので、
直接記述できない数値(今回は文字コード)などを記述するために利用するもの です。
valueの中では文字列扱いになるので、HTMLタグが利用できません。そのための回避方法っていう感じです。

”&#x” は16進数 を表し、”&#d”は10進数を表します。
今回指定したアイコンのは、FontAwesomeの16進数で ”f002” なので16進数表現で表します。
もちろん、他のアイコンの指定もできますよ！

HTML

<input type="submit" value="&#xf002;" class="search-button">

FontAwesome5の準備が整っているはてなブログであれば、
formのアクション内のURLを自分のはてなブログのURLに変えると、すぐに自分のブログで利用できますよ！

HTML

<form class="search-form" role="search" action="https:// [ここに自分のURLを] /search" method="get">

参考

みずー工房

気ままライフを綴るブログです

【HTML】検索ボタンにアイコンを設定する