Question

我正在使用React来创建应用程序，并且我想使用FontAwesome图标将它们包含在输入占位符中，这样看起来就像

<input type="text" placeholder="[here should be the user icon] Username" />

我该怎么做？我使用了" Username"，它只显示一个正方形而不是图标。也许我忘记了什么？

Answer 1

尝试将图标作为InputAddon包含在内，而不是将其强制放入占位符中。您可以通过几种方法来执行此操作。我建议下面列出两个。

方法1：引导程序

您可以安装引导程序并使用input-group-prepend或input-group-append类，然后将图标放在此处。

示例：

    import { FaUserAlt } from 'react-icons/fa';

    render() {
      return (
        <div className="input-group mb-3">
          <div className="input-group-prepend">
            <i className="classes you have"><FaUserAlt /></i>
        </div>
        <input type="text" className="form-control" placeholder="Username" />
       </div>
     )
  }

这将要求您安装bootstrap和react-icons。 bootstrap安装将允许您使用那些classNames，而react-icons安装将允许您使用<FaUserAlt />作为组件，而不是通过CSS。要安装bootstrap，请使用：npm i bootstrap。要安装react-icons，请使用：npm i react-icons。

方法2：Reactstrap

您可以使用reactstrap，它实际上是Bootstrap来进行反应。这将要求您安装reactstrap，react-icons和bootstrap，如下所示：npm i reactstrap bootstrap react-icons。

示例：来自reactstrap文档（略有改动）

import React from 'react';
import { InputGroup, InputGroupText, InputGroupAddon, Input } from 'reactstrap';
import { FaUserAlt } from 'react-icons/fa';
const Example = (props) => {
  return (
    <div>
      <InputGroup>
        <Input placeholder="Username" />
        <InputGroupAddon addonType="append">
          <FaUserAlt />
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
};

export default Example;

替代方法

您可以简单地使用CSS进行上述操作。如果您仅使用此“图标占位符”一次，我会走那条路线。但是，如果您始终在整个应用程序中都这样做，那么我认为值得考虑一下以上两种方法。

希望这可以帮助遇到此问题的任何人。

Answer 2

对于任何遇到此问题的人：

这个为我工作：How to include a Font Awesome icon in React's render()

我使用了font-awesome软件包，而不是@ fortawesome / react-fontawesome软件包。

npm install --save font-awesome

现在在index.js文件中导入超棒的字体

import '../node_modules/font-awesome/css/font-awesome.min.css';

或

import 'font-awesome/css/font-awesome.min.css';

然后相关代码如下：

<input type="text" placeholder="&#xF007; Username" />

只需从https://fontawesome.com复制所需图标的unicode，然后用它替换 F007 。

并使用以下样式输入标签：

font-family: FontAwesome;

使用React在输入占位符中的FontAwesome图标

2 个答案: