アイコン構文付きのFont awesomeとbootstrapボタン 質問する

アイコン構文付きのFont awesomeとbootstrapボタン 質問する

<button>Bootstrap では、アイコン付きのボタンはとの組み合わせを使用して実装されます<span>

http://getbootstrap.com/components/#glyphicons-examples

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

Font Awesome では、ボタンは<a>との組み合わせを使用して実装されます<i>

http://fontawesome.io/examples/

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>

もっと良い方法はありますか? それとも、これらのタグの選択は完全に恣意的なものですか?

ベストアンサー1

それは完全に使用方法によって異なります。

Bootstrap では、<a>との組み合わせを使用してボタンを実装できます<i>。同様に、Font-Awesome では、<button>との組み合わせを使用してアイコン付きのボタンを実装できます<span>

たとえば、フォームを送信する必要があり、送信ボタンに font-awesome アイコンが含まれている場合は、次のようにします。

<button type="button" class="btn btn-default" aria-label="Left Align">
 <span class="fa fa-trash-o fa-lg" aria-hidden="true"></span>
 </button>

別の例: 通常のリンクを使用する必要があり、リンクにブートストラップ グリフアイコンが含まれている場合は、次のようにします。

<a class="btn btn-danger" href="#">
 <i class="glyphicon glyphicon-align-left"></i> Delete</a>

おすすめ記事