方法1: 画像を使用する 検索アイコンの画像を用意し、HTMLのimg要素を使用して表示します。
<img src="search-icon.png" alt="検索アイコン">上記の例では、"search-icon.png"というファイル名の画像を表示しています。適切なファイルパスを指定してください。
方法2: アイコンフォントを使用する アイコンフォントを使用することで、独自のアイコンを簡単に表示できます。代表的なアイコンフォントとしてはFont AwesomeやMaterial Iconsがあります。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-search" aria-hidden="true"></i>上記の例では、Font Awesomeのアイコンフォントを使用しています。<link>要素でCSSファイルを読み込み、<i>要素でアイコンを表示しています。
方法3: CSSの疑似要素を使用する CSSの疑似要素を使用して検索アイコンを作成することもできます。
<style>
.search-icon::before {
content: "";
background-image: url(search-icon.png);
display: inline-block;
width: 16px;
height: 16px;
}
</style>
<span class="search-icon"></span>上記の例では、CSSの疑似要素(::before)を使用して検索アイコンを作成しています。background-imageプロパティで画像を指定し、display、width、heightプロパティでアイコンの表示サイズを調整しています。
以上の方法を参考に、自分のウェブサイトやアプリケーションに適した方法を選択し、検索アイコンを実装してください。