Как поместить значок Font Awesome во входной тег, используя pure css

Question

Я пытаюсь поместить значок шрифта в тег ввода, используя только 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

Answer 1

Я не вижу, что вы пробовали до сих пор, но это в основном то, что вы хотели. Просто основывая это в вашем описании.

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