[英]How to use Font Awesome with a button?
我想使用切换按钮,找到了一个完美的解决方案 。 我修改了代码以使用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>
结果是图标和纯文本都不会展开按钮:
如何自动将按钮的大小调整为基础文本的大小?
将显示属性添加到锚点。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.