Reactstrap 输入组内的 Fontawesome 图标

Question

我试图将图标放在输入字段附近，当我在 InputGroupAddon 组件中插入 FontAwesomeIcon 组件时，它看起来不像预期的那样。有我的 code example. What I want to get: screenshot 1. What I really get: 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 图标

Fontawesome icon inside Reactstrap input group

twitter-bootstrap

font-awesome

reactjs

reactstrap