如何使用离子图标将搜索图标图像放入搜索框中?

Question

我已经使用HTML和CSS制作了一个表单，我正在尝试在搜索栏的右侧一直放置一个搜索图标，如下所示。 我想知道如何使用离子图标来实现这一点？

这是表单的小提琴。

我用于创建搜索栏的HTML代码是：

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

Answer 1

您需要导入离子图标 css 文件来加载图标字体。请阅读文档 https://github.com/driftyco/ionicons

1. 下载并解压缩字体包
2. 将离子图标.css复制到您的项目
3. 将字体文件夹复制到项目中
4. 确保ionicons中的字体URL.css正确引用项目中的字体路径。
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">