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

Issue

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.

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

Solution

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>

Answered By - zainhassan