Css 无法获取'；足总搜索'；工作

我试图让“fa-fa搜索”在输入框中工作，但它不起作用。我在同一个问题上见过其他问题，但它们对我不起作用。有人能指出问题所在吗

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

---

我正在使用ReactJS、Bootstrap和它一起使用。

请确保您已经附加了必要的文件，以使font Aweasome正常工作

.searchBar{
宽度：380px；
利润率：10px；
}
.美国广播公司{
位置：相对位置；
z指数：1；
左：-30px；
}

---

它是

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>

---

我之所以使用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>