ボタンでFont Awesomeを使用するには？

Question

トグルボタンを使用して、perfect solutionが見つかりました。 I adapted the codeFont Awesomeアイコンを使用するには：ボタンの自動サイズへの道は何

：

<a id="button1" title="button1"><i class="fa fa-bluetooth fa-5x"></i></a> 
<a id="button2" title="button2"><span id="mytext">large text</span></a> 

結果は、アイコンでもテキスト形式のどちらもボタンを広げていることであるが基礎となるテキストのサイズに？

Answer 1

アンカーに表示プロパティを追加します。

$(document).ready(function() { 
 
    $('a#button1').click(function() { 
 
    $(this).toggleClass("down"); 
 
    }); 
 
});

a { 
 
    background: #ccc; 
 
    cursor: pointer; 
 
    border-top: solid 2px #eaeaea; 
 
    border-left: solid 2px #eaeaea; 
 
    border-bottom: solid 2px #777; 
 
    border-right: solid 2px #777; 
 
    padding: 5px 5px; 
 
    display: inline-block; /* add display property */ 
 
} 
 
a.down { 
 
    background: #bbb; 
 
    border-top: solid 2px #777; 
 
    border-left: solid 2px #777; 
 
    border-bottom: solid 2px #eaeaea; 
 
    border-right: solid 2px #eaeaea; 
 
} 
 
#mytext { 
 
    font-size: 3em; /* better you use em's rather than pt's */ 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a id="button1" title="button1"><i class="fa fa-bluetooth fa-5x"></i></a> 
 
<a id="button2" title="button2"><span id="mytext">large text</span></a>