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

Question

我已经使用 HTML 和 CSS 制作了一个表单，我正在尝试将搜索图标一直放在搜索栏的右侧，类似于 this。 .我想知道如何使用 ionicons 来实现这一目标？

这是 fiddle对于表格。

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

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

Answer 1

您需要导入 ionic 图标 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">