FontAwesome Icons in Input Placeholder using React

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?

Did you set fontawesome as the font family of the input? I’ve never used fontawesome for a placeholder, but if you’re seeing a square instead of an icon, it usually means that you aren’t using the fontawesome font, and whatever font you are using doesn’t have that character in it. — Nate, Dec 16 '18 at 15:50
I've installed react-fontawesome. Maybe I declared font-family: FontAwesome in a wrong way? Or should I import font awesome in my scss? — , Dec 16 '18 at 15:52
have you put styles for [`::placeholder`](https://css-tricks.com/almanac/selectors/p/placeholder/) to use font awesome? — skyboyer, Dec 16 '18 at 15:53
Yep. I've put styles for ::placeholder. But how should I import font-awesome itself to use it at a font-family? — , Dec 16 '18 at 15:57
take a look https://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder — skyboyer, Dec 16 '18 at 16:01

score 2 · Answer 1 · answered Dec 16 '18 at 16:57

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.

score 1 · Answer 2 · edited Aug 09 '20 at 00:20

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;

FontAwesome Icons in Input Placeholder using React

2 Answers2