[英]How can I add a location icon in the react bootsrap FormControl text field component?
const LocationSearchComponent = () => {
return (
<Form className="locationForm">
<Form.Group>
<Form.Control
className="locationSearchTextField"
type="text"
placeholder=" Enter your location"
/>
</Form.Group>
</Form>
);
};
You can add font-awesome to your index.html
using CDN like this:您可以使用 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"
/>
And add this css to your component:并将此 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;
}
You can take a look at this sandbox for a live working example of this solution.您可以查看此沙箱,了解此解决方案的实时工作示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.