Bhavya Arora Bhavya Arora - 6 months ago 10
CSS Question

Cannot get 'fa fa-search' to work

I am trying to get 'fa fa-search' to work inside an input box, but it doesn't work. I have seen other questions on the same one, but they did not work for me. Can someone point out the problem.

<div>
<input
type="text"
placeholder="Enter Search Text"
value={this.props.queryText}
ref="queryInput"
onChange={this.handleChange}
className="searchBar"
type="text"
/>
<i className="abc fa fa-search"></i>

</div>


Here is my CSS code

.searchBar{
width: 380px;
margin: 10px;
}

.abc{
position: relative;
z-index: 1;
left: -25px;
}


I am using ReactJS, Bootstrap along with this.

Answer

Make sure that you have attached necessary files to make font-awesome work.

.searchBar {
    width: 380px;
    margin: 10px;
}

.abc {
    position: relative;
    z-index: 1;
    left: -30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <input
        type="text" 
        placeholder="Enter Search Text" 
        value={this.props.queryText}
        ref="queryInput"
        onChange={this.handleChange}
        class="searchBar"
        type="text"
    />
    <i class="abc fa fa-search"></i>
</div>

Comments