Font awesome and bootstrap button with icons syntax : <p>In bootstrap, buttons with icons are implemented using a combination of <code>&lt;button&gt;</code> and <code>&lt;span&gt;</code>:</p>

<p><a href="http://getbootstrap.com/components/#glyphicons-examples" rel="noreferrer">http://getbootstrap.com/components/#glyphicons-examples</a></p>

<pre><code>&lt;button type="button" class="btn btn-default" aria-label="Left Align"&gt;
  &lt;span class="glyphicon glyphicon-align-left" aria-hidden="true"&gt;&lt;/span&gt;
&lt;/button&gt;
</code></pre>

<p>In font awesome, buttons are implemented using combination of <code>&lt;a&gt;</code> and <code>&lt;i&gt;</code>:</p>

<p><a href="http://fontawesome.io/examples/" rel="noreferrer">http://fontawesome.io/examples/</a></p>

<pre><code>&lt;a class="btn btn-danger" href="#"&gt;
  &lt;i class="fa fa-trash-o fa-lg"&gt;&lt;/i&gt; Delete&lt;/a&gt;
</code></pre>

<p>Is there a better way? Or are the selection of these tags completely arbitrary? </p>
