css - 无法让 'fa fa-search' 工作

Question

我试图让“fa fa-search”在输入框中工作，但它不起作用。我在同一个问题上看到了其他问题，但它们对我不起作用。谁能指出问题。

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

这是我的 CSS 代码

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

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

我正在使用 ReactJS、Bootstrap。

Answer 1

确保您已经附加了必要的文件，以使字体很棒。

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