如何使用离子图标将搜索图标图像放置在搜索框中？

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. 将ionicons.css复制到项目中
3. 将字体文件夹复制到项目中
4. 确保ionicons.css中的字体urls正确引用项目中的字体路径。
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">

​