Adding font awesome icon inline yet superscript with other element
<p>I have two scenarios with similar problems. I'm attempting to add a font awesome icon:</p>

<ol>
<li>Inline with a text input and 'add on' button, yet superscript (<a href="https://jsfiddle.net/spencerkier/b3oewudp/" rel="nofollow noreferrer">JSFiddle1</a>)</li>
</ol>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;div class="input-group"&gt;
  &lt;input class="form-control"&gt;
  &lt;span class="input-group-btn"&gt;
    &lt;button class="btn btn-default" id="copy-link" type="button"&gt;
      &lt;i class="fa fa-files-o"&gt;&lt;/i&gt; Copy
    &lt;/button&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;span&gt;
  &lt;i class="fa fa-info-circle"&gt;&lt;/i&gt;
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<ol start="2">
<li>Inline with text in a bootstrap panel heading text, but in the top right corner of the heading area (<a href="https://jsfiddle.net/spencerkier/2uw3r8z5/" rel="nofollow noreferrer">JSFiddle2</a>)</li>
</ol>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading"&gt;
    &lt;b&gt;
      Text
    &lt;/b&gt;
    &lt;span&gt;
      &lt;div class="dropdown"&gt;
        &lt;i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;&lt;/i&gt;
      &lt;/div&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="panel-body"&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Here's how I'd like each to look:</p>

<ol>
<li><a href="https://i.stack.imgur.com/MapDY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MapDY.png" alt="enter image description here"></a></li>
<li><a href="https://i.stack.imgur.com/SkRsB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SkRsB.png" alt="enter image description here"></a></li>
</ol>

<p>I don't know if this is important, but as a side note:</p>

<ol>
<li>In the first scenario, the icon has a popover</li>
<li>In the second scenario, the icon has a dropdown</li>
</ol>

<p>I don't think these have any effect on the layout, so I left out the related code.</p>