title: How to put the number at top right corner of cart icon?
body: <p>I would like to place a number at top right corner of the font awesome cart icon. </p>
  
  <p>I have created this simple html. </p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;style&gt;
      &lt;/style&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;i class="fa" style="font-size:24px"&gt;&amp;#xf07a;&lt;/i&gt;
      &lt;span&gt; 5 &lt;/span&gt;
  
      &lt;/body&gt;
      &lt;/html&gt; 
  </code></pre>
  
  <p>The result is as follows.</p>
  
  <p><a href="https://i.stack.imgur.com/xrPz6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xrPz6.png" alt="enter image description here"></a></p>
  
  <p>How can i make the number appear the top right corner of the cart icon as shown in the following image?</p>
  
  <p><a href="https://i.stack.imgur.com/6SgV3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6SgV3.png" alt="enter image description here"></a></p>
  
  <p>I appreciate any help from css experts. Thanks!</p>