フォント素晴らしいとブートストラップボタンが

Question

ブートストラップには、アイコンとボタンが<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> 

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

Answer 1

<div class="container"> 
    <h2>Glyphicon Examples</h2> 
    <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>  
    <p>Envelope icon as a link: 
    <a href="#"><span class="glyphicon glyphicon-envelope"></span></a> 
    </p> 
    <p>Search icon: <span class="glyphicon glyphicon-search"></span></p> 
    <p>Search icon on a button: 
    <button type="button" class="btn btn-default"> 
     <span class="glyphicon glyphicon-search"></span> Search 
    </button> 
    </p> 
    <p>Search icon on a styled button: 
    <button type="button" class="btn btn-info"> 
     <span class="glyphicon glyphicon-search"></span> Search 
    </button> 
    </p> 
    <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>  
    <p>Print icon on a styled link button: 
    <a href="#" class="btn btn-success btn-lg"> 
     <span class="glyphicon glyphicon-print"></span> Print 
    </a> 
    </p> 
</div> 

Answer 2

完全に用途によって異なります。

ブートストラップでは、<a>と<i>の組み合わせを使用してボタンを実装できます。同様に、フォントの場合、アイコン付きのすばらしいボタンは、<button>と<span>の組み合わせを使用して実装できます。例えば

：私たちは、フォームと送信ボタンを提出する必要がある場合は、我々はthis--

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

別の例のようにそれを行うその後、フォント素晴らしいアイコンが含まれています。我々は、通常のリンクを使用する必要がある場合リンクは、ブートストラップglyphiconアイコンが含まれているし、我々は、ブートストラップにあなたがいる限り、彼らは `<クラス=" BTN BTNのような正しいクラスを持っているように、あまりにもとを使用することができます実際にthis--

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