Значки FontAwesome во входном заполнителе с использованием React - PullRequest
Новая
       7

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

0 голосов
/ 16 декабря 2018

Я использую React для создания приложения и хочу использовать значки FontAwesome для включения их в местозаполнитель ввода, чтобы он выглядел как 

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

Как я могу это сделать?Я использовал "&#xF007; Username", и он показывает только квадрат вместо значка.Может я что то забыл?

1 Ответ

0 голосов
/ 16 декабря 2018

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

Подход 1: Bootstrap

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

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

...