web-dev-qa-db-ja.com

Font awesomeおよびbootstrapアイコンの構文を持つボタン

ブートストラップでは、アイコン付きのボタンは<button>および<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>

素晴らしいフォントでは、ボタンは<a>および<i>：

http://fontawesome.io/examples/

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

もっと良い方法はありますか？または、これらのタグの選択は完全に任意ですか？

twitter-bootstrap-3font-awesome
10
Wadih M.

それは使用法に完全に依存します。

bootstrap=では、<a>および<i>。同様に、アイコン付きのフォントが素晴らしいボタンでは、<button>および<span>。

例：フォームを送信する必要があり、送信ボタンにフォントが素晴らしいアイコンが含まれている場合、次のようにします。

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

別の例：通常のリンクを使用する必要があり、リンクにbootstrap=グリフィコンアイコンが含まれている場合、次のようにできます。

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

<i>タグを使用した別の例。

<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<button  class="btn btn-warning">
    <i class="fa fa-trash-o fa-lg"></i>
</button>
    
<button  class="btn btn-primary">
    <i class="fa fa-trash-o fa-lg"></i> Delete
</button>

<button  class="btn btn-danger">
    Delete <i class="fa fa-trash-o fa-lg"></i> 
</button>
0
RAGINROSE