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

Question

I'm using React for creating an app and I want to use FontAwesome icons for including them into the input placeholder, so that it would look like

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

How can I do that? I've used " Username" and it shows only a square instead of an icon. Maybe I forgot something?

Answer 1

Try including your icon as an InputAddon rather than forcing it into your placeholder. You can do this a few ways. I would suggest the two listed below.

Approach 1: Bootstrap

You can install bootstrap and use the input-group-prepend or input-group-append classes and place your icon there.

Example:

    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>
     )
  }

This will require you to install bootstrap and react-icons . The bootstrap install will allow you to use those classNames and the react-icons install will allow you to use <FaUserAlt /> as a component rather than going through CSS. To install bootstrap use: npm i bootstrap . To install react-icons use: npm i react-icons .

Approach 2: Reactstrap

You can use reactstrap which is essentially Bootstrap for react. This will require you to install both reactstrap , react-icons , and bootstrap like so: npm i reactstrap bootstrap react-icons .

Example: From reactstrap documentation (slightly altered)

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;

Alternative Approach

You can simply do the above with CSS. I would go that route if you are only using this "icon placeholder" once. But, if you are consistently doing this throughout your app, I think it maybe worth it to look into the above two approaches.

Hope this helps anyone who comes across this.

Answer 2

For anyone who faces this issue:

This one worked for me: How to include a Font Awesome icon in React's render()

Instead of @fortawesome/react-fontawesome package, I used font-awesome package.

npm install --save font-awesome

Now import font-awesome in your index.js file

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

or

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

Then the code in question goes like this:

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

Just copy unicode of your desired icon from https://fontawesome.com and replace F007 with it.

And style input tag with following:

font-family: FontAwesome;