Question

我想在React Bootstrap的导航栏中显示搜索图标以及搜索栏

src / modules / home / Home.jsx

import React, { Component } from 'react'
import InformationTableView from '../../components/InformationTableView'
import { CustomButton } from '../../components/CustomButton'
import {Navbar } from 'react-bootstrap'
import { Form, Button, FormGroup, FormControl, ControlLabel ,InputGroup} from "react-bootstrap";
import ReactBootstrap, {Jumbotron, Col, Grid, Panel,NavDropdown} from 'react-bootstrap'
import { MDBCol, MDBIcon } from "mdbreact";
import 'mdbreact/dist/css/mdb.css'

class Home extends Component {
    render() {
        return (
            <div>

                <Navbar className="bg-light justify-content-between">
                    <Form inline>
                        <MDBCol md="6">
                            <form className="form-inline mt-4 mb-4">
                                <MDBIcon fab icon="search" />
                                <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Account Number" aria-label="Search" />
                            </form>
                        </MDBCol>
                        <InputGroup>
                    </Form>
                </Navbar>

            </div>
        )
    }
}

export default Home

此代码段中是否存在错误？

Answer 1

嗨，您错过了根文件中的Fontawesome样式表将此链接添加到您的HTML根文件文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

使用MDBIcon时，搜索图标不会出现

1 个答案: