1
  1. LocationSearchComponent.js when I add &#xf3c5 Unicode showing empty icon
const LocationSearchComponent = () => {
  return (
    <Form className="locationForm">
      <Form.Group>
        <Form.Control
          className="locationSearchTextField"
          type="text"
          placeholder="&#xf3c5; Enter your location"
        />
      </Form.Group>
    </Form>
  );
};
Thirumalesu
  • 9
  • 4
  • What is your fontawesome version? – Ahmet Emre Kilinc Sep 24 '22 at 10:43
  • these are the packages i am using along with version ``` "@fortawesome/fontawesome-free-solid": "^5.0.13", "@fortawesome/fontawesome-svg-core": "^6.2.0", "@fortawesome/free-solid-svg-icons": "^5.15.1", "@fortawesome/react-fontawesome": "^0.1.12" ``` – Thirumalesu Sep 24 '22 at 11:00

1 Answers1

0

You can add font-awesome to your index.html using CDN like this:

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

And add this css to your component:

.locationSearchTextField::-webkit-input-placeholder {
  font-family: Circular, "Font Awesome 5 Free";
  font-weight: 900;
}

.locationSearchTextField::-moz-placeholder {
  font-family: Circular, "Font Awesome 5 Free";
  font-weight: 900;
}

.locationSearchTextField:-ms-input-placeholder {
  font-family: Circular, "Font Awesome 5 Free";
  font-weight: 900;
}

You can take a look at this sandbox for a live working example of this solution.

Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
  • Thank you it worked, one question I have, can we add the hosted URL directly in the index.html, and for that do we need to take any license? I am completely new to the Icon functionality in React – Thirumalesu Sep 24 '22 at 15:51
  • The css that we've linked has [free licence](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css), [also see](https://fontawesome.com/license/free). So we can use it anywhere in our app. One more thing, can you please accept my answer by clicking the check icon on the left side of my answer? – Ahmet Emre Kilinc Sep 24 '22 at 16:05
  • okay Thank you, one last question is there any other way, like adding a package in the package.json and importing the min.css file from the awesome fonts – Thirumalesu Sep 24 '22 at 16:36
  • I could not make it work. But the answers of [this question](https://stackoverflow.com/questions/21406538/how-to-use-font-awesome-icons-from-node-modules) show there are some alternatives. I think it would be easier using sass or less. – Ahmet Emre Kilinc Sep 24 '22 at 17:29