在输入字段中放置一个很棒的字体 svg 图标答案

【问题标题】：Putting a font awesome svg icon inside an input field在输入字段中放置一个很棒的字体 svg 图标
【发布时间】：2022-01-24 23:45:05
【问题描述】：

我正在尝试使用 font awesome svg 图标在输入字段中显示这些日历图标，并稍微增加它们的大小。有谁知道它是怎么做的吗？

进口：

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import { faCalendarAlt, faPlane} from '@fortawesome/free-solid-svg-icons'

代码部分：

            <div class="row">
                <div class="col-sm-6">
                <FontAwesomeIcon icon={faCalendarAlt} />
                <input 
                placeholder="Departure Date" 
                type="text" id="date-picker" 
                class="form-control datepicker mb-4" 
                ref={departureDate}
                />
                </div>
                <div class="col-sm-6">
                <FontAwesomeIcon icon={faCalendarAlt} />
                <input 
                placeholder="Arrival Date" 
                type="text" 
                id="date-picker" 
                class="form-control datepicker mb-4" 
                ref={arrivalDate}
                />
                </div>
            </div>

【问题讨论】：

标签： css reactjs svg font-awesome

【解决方案1】：

使用带图标的带边框的<div> 和不带边框/轮廓的输入：

div {
  border: 1px solid grey;
  height: 24px;
 }

i {
  padding: 2px 0px 0 4px;
}

input {
  border: none;
  outline: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>

<div>
  <i class="far fa-calendar-alt"></i>
  <input />
</div>

【讨论】：