如何使用離子子在搜索框中放置搜索圖標圖像？

Question

我已經使用HTML和CSS制作了表單，並且試圖將搜索圖標一直放置在搜索欄的右側，如下所示 。 我想知道如何使用離子子來實現嗎？

這是表格的小提琴 。

我用來創建搜索欄的HTML代碼是：

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

Answer 1

您需要導入ion圖標的css文件來加載圖標字體。 請閱讀https://github.com/driftyco/ionicons中的文檔

1. 下載並解壓縮字體包
2. 將ionicons.css復制到您的項目中
3. 將fonts文件夾復制到您的項目中
4. 確保ionicons.css中的字體URL正確引用了項目中的字體路徑。
5. 包括每個需要使用它的網頁上對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">