无法让“fa fa-search”工作答案

【问题标题】：Cannot get 'fa fa-search' to work无法让“fa fa-search”工作
【发布时间】：2016-06-03 05:14:21
【问题描述】：

我试图让“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 以及这个。

【问题讨论】：

标签： css twitter-bootstrap reactjs

【解决方案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>

【讨论】：

我使用 className 是有原因的，它可以工作。我错过了字体真棒。如果您可以编辑和删除 className 部分，我可以接受您的回答，因为我从您那里得到了解决方案。
致反对者我可以知道你反对的原因吗？？

【解决方案2】：

这是class 不是className

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

【讨论】：