无法让“fa-search”工作

时间:2016-06-03 05:14:22

标签: css twitter-bootstrap reactjs

我想让'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以及它。

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

angular.js:13642 Error: [ng:areq] Argument '{{CurrentPageCtrl}}' is not a function, got undefined 而非class

className