title: How to adjust table row height when using font-awesome icon in bootstrap 4?
body: <p>Whenever I add font-awesome icon on my table my table row height increases. I am using bootstrap 4 and font-awesome 4.7.0</p>
  
  <pre><code>&lt;table class="table table-bordered table-condensed table-stripped"&gt;
      &lt;thead&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;Product&lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt;
          &lt;th&gt;Category&lt;/th&gt;
          &lt;th&gt;Featured&lt;/th&gt;
          &lt;th&gt;Sold&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;!-- Here is the problem--&gt;
              &lt;td&gt;&lt;i class="fa fa-edit" style="font-size:30px;color:red"&gt;&lt;/i&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When Use font-awesome in bootstrap 4</p>
  
  <p><strong>See icon is small here when I increase icon size my row height also increases</strong></p>
  
  <p><a href="https://i.stack.imgur.com/S8pAD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S8pAD.png" alt="enter image description here"></a></p>
  
  <p><strong>I want this icon size and row height is perfect</strong></p>
  
  <p><a href="https://i.stack.imgur.com/XWifj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XWifj.png" alt="enter image description here"></a></p>
  
  <p>when I use font-awesome icon then my table row height increase and when I remove <code>class="fa fa-edit"</code> then my table look ok and table row height get short. I want to adjust font-awesome icon and my table row height but I am unable to do it.</p>
  
  <p>For solving this problem I add <code>style="font-size:30px"</code> in <code>&lt;i&gt;</code> then my font icon visible properly on my table row but table row height increases which look odd. I want to increase <code>font-size</code> of my icon but do not want to increase my table row height or I also want to adjust my table row height manually. For this I have used <code>&lt;td height="100"&gt;</code> but it did not work.
  <code>&lt;tr height="100"&gt;</code> but it did not work with font-awesome icon.</p>
  
  <p>Your valuable suggestions would be a great help for a beginner like me.
  Thank You.</p>