Put a font-awesome icon inside an input tag
<p>I'm trying to put a Font-awesome icon inside an input tag.</p>
<p>This is my <code>HTML</code> code:</p>
<pre><code>&lt;div class=&quot;input-group&quot;&gt;
        &lt;input class=&quot;form-control&quot; type=&quot;password&quot; placeholder=&quot;Password&quot;&gt;
        &lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;fa fa-key fa-fw&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<p>But that icon is bigger than input box as you can see in this picture:</p>
<p><a href="https://i.stack.imgur.com/763qw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/763qw.png" alt="enter image description here" /></a></p>
<p>How can I fix the icon?</p>