イコンコンを使って検索ボックスに検索アイコン画像を置く方法は？

Question

私はHTMLとCSSを使用してフォームを作成しましたが、検索バーの右側に検索アイコンを配置しようとしています（thisなど）。 私はそれを達成するためにイオニコンをどのように使用できますか？

フォームにはfiddleがあります。私は検索バーを作成するために使用しています

HTMLコードは次のとおりです。

<div id="myInput"> 
     <input type="text" onkeyup="myFunction()" placeholder="Search.." title="Type in a name"> 
</div> 

Answer 1

あなたがアイコンフォントをロードするためにイオンアイコンcssファイルをインポートする必要があります。 、ionicons内のフォントのURLを確認してくださいhttps://github.com/driftyco/ionicons

1. ダウンロードでドキュメントを読んで、あなたのプロジェクト
2. にプロジェクト
3. コピーフォントフォルダにフォントパック
4. コピーionicons.cssを抽出してください。 cssはプロジェクト内のフォントパスを適切に参照します。
5. 使用する必要があるすべてのWebページからionicons.cssファイルへの参照を含めます。

次に、次のコードを追加すると、検索バーの右側に検索アイコンが追加されます。

.myInput { 
 
    position:relative; 
 
    width: 670px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.leftadd .icon 
 
{ 
 
    position: absolute; 
 
    padding: 15px; 
 
    right:0px; 
 
    pointer-events: none; 
 
} 
 
.myInput input { 
 
    background-position: 99% 50%; 
 
    background-repeat: no-repeat; 
 
    font-size: 16px; 
 
    margin-top: 100px; 
 
    width: 670px; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    margin-bottom: 264px; 
 
    margin-right: auto; 
 
    display: block; 
 
    margin-left: auto; 
 
    padding: 12px 20px 12px 40px; 
 
}

<div class="myInput leftadd"> 
 
    <i class="icon ion-home"></i> 
 
    <input type="text" onkeyup="myFunction()" placeholder="Search.." title="Type in a name">