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

Question

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

这是表单的小提琴。

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

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

Answer 1

您需要导入 ion icon css 文件以加载图标字体。请阅读https://github.com/driftyco/ionicons上的文档

1. 下载并解压字体包
2. 将 ionicons.css 复制到您的项目中
3. 将字体文件夹复制到您的项目中
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">