CODEWITHSUNDEEP
cssreactjssvgfont-awesome
User2000
User2000

Reputation: 119

Putting a font awesome svg icon inside an input field

I'm trying to display these calender icons inside the input fields using font awesome svg icons as well as increase their size a bit. Does anyone know how it's done?

Imports:

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

Code Section:

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

Upvotes: 2

Views: 1250

Answers (1)

Michael Rovinsky
Michael Rovinsky

Reputation: 7210

Use a bordered <div> with an icon and an input without border / outline:

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>

Upvotes: 1

Related Questions