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

【问题标题】：FontAwesome Icons in Input Placeholder using React使用 React 的输入占位符中的 FontAwesome 图标
【发布时间】：2024-01-15 07:56:02
【问题描述】：

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

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

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

【问题讨论】：

您是否将 fontawesome 设置为输入的字体系列？我从来没有使用 fontawesome 作为占位符，但是如果你看到的是一个正方形而不是一个图标，这通常意味着你没有使用 fontawesome 字体，而且你使用的任何字体都没有那个字符.
我已经安装了 react-fontawesome。也许我以错误的方式声明了 font-family: FontAwesome？还是应该在我的 scss 中导入很棒的字体？
您是否为::placeholder 设置了样式以使用令人敬畏的字体？
是的。我已经为 ::placeholder 设置了样式。但是我应该如何导入 font-awesome 本身以在字体系列中使用它？
看看*.com/questions/19350291/…

标签： reactjs font-awesome

【解决方案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 完成上述操作。如果你只使用这个“图标占位符”一次，我会走那条路。但是，如果您在整个应用程序中始终如一地这样做，我认为研究上述两种方法可能是值得的。

希望这对遇到此问题的任何人有所帮助。

【讨论】：

【解决方案2】：

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

这个对我有用：How to include a Font Awesome icon in React's render()

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

npm install --save font-awesome

现在在你的 index.js 文件中导入 font-awesome

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;

【讨论】：