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

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

我正试图通过

ionic

中的以下代码实现这一点：

//in.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>

但我只能做到以下几点：

---

有人能帮我吗？

您需要对

标签图标使用
位置：绝对
，并对标签使用
显示：柔性
，将图标内部与中心对齐

注意：我在这里使用了字体真棒只是为了图标视觉


离子项目{
位置：相对位置；
}
离子标签{
边界半径：50%；
边框：2倍纯红；
位置：绝对位置；
排名：0；
左：0；
宽度：46px；
高度：46px；
z指数：9；
框大小：边框框；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
输入{
边框：1px实心；
高度：46px；
宽度：100%；
显示：块；
边界半径：23px；
框大小：边框框；
左侧填充：50px；
大纲：无；
}
非常简单，只需给ion图标类留出空间即可

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

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

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