如何在输入字段开头的圆圈内放置一个图标？

Question

我试图在圆圈内放置一个图标，该圆圈将放置在输入字段的开头，如下所示：

我试图使用下面的ionic代码实现这一点：

//在.html中

<ion-row>
  <ion-item>
    <ion-label> <ion-icon name="person"></ion-icon></ion-label>
    <ion-input clearInput type="text"></ion-input>
  </ion-item>
</ion-row>

//在.scss中

ion-item {
  border-radius: 23px;
  padding-left: 0;
}

ion-label {
    border-radius: 23px;
    border: 2px solid red;
    width: 12%;
    height: 100%;
}

但我只能在下面实现：

任何人都可以帮助我吗？

Answer 1

您将需要使用position:absolute作为label图标...并使用display:flex到标签以将图标对齐到中心

^{注意：我在这里使用font-awesome仅用于图标视觉...}

 ion-item { position: relative; } ion-label { border-radius: 50%; border: 2px solid red; position: absolute; top: 0; left: 0; width: 46px; height: 46px; z-index: 9; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } input { border: 1px solid; height: 46px; width: 100%; display: block; border-radius: 23px; box-sizing: border-box; padding-left: 50px; outline: none; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <ion-row> <ion-item> <ion-label><i class="fa fa-user"></i></ion-label> <input clearInput type="text"> </ion-item> </ion-row> 

Answer 2

非常简单，只需为ion-icon类提供保证金

.ion-icon{
     margin: 8px 0 0 8px;
     display: block;
}

根据图标的正确位置调整边距。