如何使用纯 CSS 将 Font Awesome 图标放在输入标签中答案

【问题标题】：How to put Font Awesome icon in an input tag using pure css如何使用纯 CSS 将 Font Awesome 图标放在输入标签中
【发布时间】：2020-03-12 11:43:43
【问题描述】：

我正在尝试仅使用 CSS 将字体真棒图标放在输入标签中。如果我尝试提供边距或填充，字体真棒图标也在尝试移动输入标签。请帮助如何仅使用 CSS 来实现这一点。这是一个反应项目

这是我的代码


import React from 'react';
import './Home.css';

function Home() {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Home'>
                        <span><i className="fas fa-search iconstyle"></i></span>
                        <input type='text' placeholder='Search'>
                        </input>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Home
````

This is css
````
.iconstyle {
    margin-left: 10px;
}

```

If I am not clear with my doubt, please put a comment

【问题讨论】：

你能不能也提供你的css
我在我的问题中也分享了 CSS，请查看@Markipe

标签： html css reactjs

【解决方案1】：

到目前为止，我看不到您尝试了什么，但这基本上就是您想要的。只是根据你的描述。

.Home{ 
  position: relative; 
}
.Home span{ 
  position: absolute; 
  left: 10px; /* any position you want to set, (right, left, top, bottom) */
}

【讨论】：