title: Show icon only on hover
body: <p>I have a table that contains a column with an icon. I want the icons to be hidden by default, and only appear on hover.</p>
  
  <p><strong>HTML code:</strong></p>
  
  <pre><code>&lt;table class="table table-hover"&gt;
    &lt;tr&gt;
      &lt;th&gt;From&lt;/th&gt;
      &lt;th&gt;To&lt;/th&gt;
      &lt;th&gt;Connecting Airport&lt;/th&gt;
      &lt;th&gt;Comment&lt;/th&gt;
      &lt;th&gt;Report&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;JFK&lt;/td&gt;
      &lt;td&gt;CPH&lt;/td&gt;
      &lt;td&gt;ARN&lt;/td&gt;
      &lt;td&gt;N/A&lt;/td&gt;
      &lt;td&gt;&lt;i class="fa fa-exclamation-triangle" title="Report outdated information" style="color:#da5450;"&gt;&lt;/i&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;SFO&lt;/td&gt;
      &lt;td&gt;EWR&lt;/td&gt;
      &lt;td&gt;ORD&lt;/td&gt;
      &lt;td&gt;N/A&lt;/td&gt;
      &lt;td&gt;&lt;i class="fa fa-exclamation-triangle" title="Report outdated information" style="color:#da5450;"&gt;&lt;/i&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Minimal Working Example:</strong></p>
  
  <p><a href="https://jsfiddle.net/bce9a257/1/" rel="nofollow">https://jsfiddle.net/bce9a257/1/</a></p>