'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>
htmlcssfont-awesometextfield


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lalji Tadhani

Related Questions