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

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

您需要为 label 图标使用 position:absolute...并对标签使用 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>