CODEWITHSUNDEEP
htmlcssfont-awesometextfield
Kalana Tebel
Kalana Tebel

Reputation: 105

How to use fa-plus-circle icon next to a text field using CSS and HTML?

I want to use fa-plus-circle item next to the text field as below. How can I achieve that using CSS and HTMl. I haven't use any CSS right now since it's affecting to all the other places that using fa-plus-circle.

enter image description here

.html

 <div class="col-sm-6">
        <label class="col-sm-3 col-form-label" >My Name <span class="fa fa-star required-field"></span> </label>
         <input type="text" class="form-control"><span
             class="fa fa-plus-circle text-success cursor-point"></span>
    </div>

Upvotes: 0

Views: 664

Answers (2)

zainhassan
zainhassan

Reputation: 1780

https://getbootstrap.com/docs/5.0/forms/input-group/

You can use input group for this

<div class="input-group mb-3">
  <input type="text" class="form-control">
  <span class="input-group-text">
    <span class="fa fa-plus-circle text-success cursor-point"></span>
  </span>
</div>

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Try This way

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6">
    <div class="d-flex align-items-center">
        <div class="flex-fill">
            <input type="text" class="form-control">
        </div>
        <span class="ml-3 fa fa-plus-circle text-success cursor-point"></span>
    </div>
</div>

Upvotes: 1

Related Questions