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

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>