如何在 react bootsrap FormControl 文本字段組件中添加位置圖標？

Question

1. LocationSearchComponent.js當我添加 &#xf3c5 Unicode 時顯示空圖標

const LocationSearchComponent = () => {
  return (
    <Form className="locationForm">
      <Form.Group>
        <Form.Control
          className="locationSearchTextField"
          type="text"
          placeholder="&#xf3c5; Enter your location"
        />
      </Form.Group>
    </Form>
  );
};

Answer 1

您可以使用 CDN 將 font-awesome 添加到index.html中，如下所示：

<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"
    />

並將此 css 添加到您的組件中：

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

您可以查看此沙箱，了解此解決方案的實時工作示例。