Question

我使用HTML和CSS创建了一个表单，我试图在搜索栏的右侧一直放置一个搜索图标，如this。我想知道如何使用离子来实现这一目标？

以下是表单的fiddle。

我用来创建搜索栏的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

上的文档

下载并解压缩字体包
将ionicons.css复制到您的项目
将fonts文件夹复制到项目中
确保ionicons.css中的字体网址正确引用项目中的字体路径。
从您需要使用它的每个网页中包含对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">

如何使用ionicons将搜索图标图像放入搜索框？

1 个答案: