如何通过按钮使用 Font Awesome？答案

【问题标题】：How to use Font Awesome with a button?如何通过按钮使用 Font Awesome？
【发布时间】：2016-07-25 13:19:47
【问题描述】：

我想使用切换按钮并找到perfect solution。我adapted the code 使用Font 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>

结果是图标和纯文本都没有展开按钮：

如何将按钮的大小自动调整为底层文本的大小？

【问题讨论】：

标签： jquery html css

【解决方案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>

【讨论】：