今回は、「Font Awesomeアイコンを使って検索フォームを作成する方法」について紹介します。

WordPressのようなブログサイトでよく使われているので、是非参考にしてください。

【CSS】Font Awesomeアイコンを使って検索フォームを作成する方法

完成形はこちら。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

それでは早速コーディングしていきましょう！

HTML

<form class="search-form" role="search" action="">
    <input type="submit" value="" class="search-button">
    <input type="text" name="q" class="search-input" placeholder="キーワード検索" required="">
</form>

formタグの中にFont Awesomeアイコンを表示するためのinputタグと、キーワード検索をするためのinputタグの2つを用意します。

そして、今回はFont Awesomeアイコンを使うので、必ずFont AwesomeアカウントのCDNコードをheadタグで読み込んでおきましょう。

CSS

.search-form {
    margin: 10px;
    padding: 5px 10px;
    border: 1px solid #333;
    border-radius: 30px;
    width: 300px;
    max-width: 100%;
    display: flex; 
    align-items: center;
    font-size: 16px;
}
.search-input {
    border: none; 
    background: none; 
    outline: none;
    width: 250px;
    max-width: 100%;
}
.search-button {
    border: none; 
    background: none;  
    outline: none;
    color: #999;  
    font-weight: 900; 
    font-family: "Font Awesome 5 Free";
    transition: color 0.5s ease 0s;
}
.search-button:hover {
    color: #333;
}

search-buttonクラスには必ず「font-family: “Font Awesome 5 Free”;」のコードを記述しておきましょう。

このコードがないとせっかくFont AwesomeのCDNをheadタグに記述していても表示されなくなるので注意してください。

まとめ

以上が、「Font Awesomeアイコンを使って検索フォームを作成する方法」でした。