Иконки FontAwesome в заполнителе ввода с использованием React

Попробуйте включить свой значок как InputAddon, а не вставлять его в местозаполнитель. Вы можете сделать это несколькими способами. Я бы предложил два из перечисленных ниже.

Подход 1: Bootstrap

Вы можете установить начальную загрузку и использовать классы 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. Я бы пошел по этому пути, если бы вы использовали этот «заполнитель значков» только один раз. Но, если вы постоянно делаете это во всем своем приложении, я думаю, что, возможно, стоит изучить два вышеупомянутых подхода.

Надеюсь, это поможет любому, кто сталкивается с этим.

Для всех, кто сталкивается с этой проблемой:

У меня сработало: Как включить значок Font Awesome в Render () React

Вместо пакета @ fortawesome / react-fontawesome я использовал пакет font-awesome.

npm install --save font-awesome

Теперь импортируйте 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 и замените им F007.

И введите тег ввода стиля следующим образом:

font-family: FontAwesome;