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

Question

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

我正在尝试使用;FFMETADATA1 中的以下代码实现此目的：

//在.html中

ionic

//在.scss

中

<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>

但我只能在下面实现：

任何人都可以帮助我吗？

Answer 1

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

^{注意：我在这里只使用了font-awesome for icon visual ...}

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

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