How can I add a location icon in the react bootsrap FormControl text field component?

Question

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

Answer 1

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.