title: Bootstrap 4 align icon with <a> tag
body: <p>I am trying to align an icon with text, but when using the <code>.float-right</code> class on the icon, it gets dis-aligned with the text.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="card mb-0"&gt;
    &lt;div class="card-header collapsed" data-toggle="collapse" href="#collapse1"&gt;
      &lt;a class="card-title text-primary"&gt;&lt;i class="fa fa-plus align-middle float-right"&gt;&lt;/i&gt; Diagnostic&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="collapse1" class="collapse"&gt;
      &lt;textarea name="diagnostic" class="form-control rounded-0" style="height: 120px; resize: none;"&gt;&lt;/textarea&gt;                         
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I remove the <code>.float-right</code> the icon gets properly align with text on the left.</p>
  
  <p>Can anybody help me to understand the alignment properties in Bootstrap 4?</p>