【问题标题】:to have font awesome search icon in react-bootstrap-table2-toolkit searchbar在 react-bootstrap-table2-toolkit 搜索栏中有字体真棒搜索图标
【发布时间】:2020-12-14 16:38:09
【问题描述】:

使用 react-bootstrap-table2 进行表和搜索,如下所示

<ToolkitProvider
          bootstrap4
          keyField='id'
          data={data}
          columns={columns}
          search
      >
          {props=>(
              <>
                  <SearchBar {...props.searchProps} placeholder='Start typing'/>
                  <br/>
                  <BootstrapTable condensed bordered
                                    id='bootstrap-tr'
                                    {...props.baseProps} 
                                    noDataIndication={() => 'There is no data to display'} 
                                    loading={loading} 
                                    overlay={overlayFactory({ spinner: true })} 
                                    pagination={paginationFactory(options)}
                                    // rowClasses={rowClasses}
                                    // expandRow={expandRow}
                                    />
              </>
          )}
      </ToolkitProvider>

搜索栏是这样的

我正在使用 FontAwesome-5 图标,并希望将 fa-search 图标 添加到 react-bootstrap-table2-toolkit SearchBar,如下所示

对此有任何建议

【问题讨论】:

    标签: reactjs react-bootstrap font-awesome-5 react-bootstrap-table


    【解决方案1】:

    通过将以下样式添加到 fa-search 图标来解决此问题

    css
    #{yourid} {
        position: absolute;
        width: 2.375rem;
        /*height: 2.375rem;*/
        line-height: 2.375rem;
        text-align: center;
        color: #7B7B7B;
    }
    
    js file
    <i className='fas fa-search' id='filtersubmit' style={{fontSize:'15px'}}/>
    <SearchBar {...props.searchProps} placeholder=''/>
    

    【讨论】:

      猜你喜欢
      • 2017-10-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-07-30
      • 1970-01-01
      • 2022-06-28
      相关资源
      最近更新 更多