Question

我正在尝试在输入字段附近放置图标，当我在InputGroupAddon组件内插入FontAwesomeIcon组件时，它看起来不像预期的那样。有我的code example。我想要得到的是：screenshot 1。我真正得到的是：screenshot 2。

Answer 1

您需要将FontAwesomeIcon组件放在span标签内

<span className="input-group-text"><FontAwesomeIcon icon={faUser} /></span>

Answer 2

或者您可以使用InputGroupText

<InputGroup>
    <InputGroupAddon addonType="prepend">
        <InputGroupText>
            <i class="fa fa-arrow-circle-left" aria-hidden="true" style={{color:'#675cff', fontSize: 18}}>
            </i>
        </InputGroupText>
    </InputGroupAddon>
    <Input Style={{ backgroundColor: 'white', color:'Black'}} placeholder="Enter Name">
    </Input>
</InputGroup>

Reactstrap输入组中的Fontawesome图标

2 个答案: