title: Font awesome icon inline with table border css/bootstrap
body: <p>I have added a font awesome icon in a table by using the following code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" /&gt;
  
  &lt;table class="table table-bordered w-auto"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Column_1&lt;/th&gt;
        &lt;th&gt;Column_2&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="form-group"&gt;
          &lt;input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name"&gt;
          &lt;div class="d-flex justify-content-center"&gt;
            &lt;a class="fa fa-plus-circle" href="#"&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Can anyone please tell me how to bring this icon to the bottom line and center of that column, i.e. one half of this icon is inside and the other half is outside the table.</p>