[英]Unable to dynamically use Font Awesome icon in submit button
我可以使用以下HTML将font-awesome图标用作按钮文本:
<button tabindex="4" type="submit" id="submit" class="btn btn-primary btn-lg disabled" onclick="sendemail(); return false;"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
但是,我需要使用JQuery动态执行此操作:
var contact_form = $('div#contact.pbmodal div.modal-dialog div.modal-content form');
var submit_button = contact_form.find('button#submit');
submit_button.text('<i class="fa fa-paper-plane" aria-hidden="true"></i>');
上面的JQuery将font-awesome元素输出为文本标签,即按钮显示<i class="fa fa-paper-plane" aria-hidden="true"></i>
而不是显示实际图标。
使用.html()
代替将HTML标记添加到DOM,否则.text()
会将代码添加为文本:
submit_button.html('<i class="fa fa-paper-plane" aria-hidden="true"></i>');
希望这可以帮助。
var submit_button = $("#submit"); submit_button.html('<i class="fa fa-paper-plane" aria-hidden="true"></i>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <button tabindex="4" type="submit" id="submit" class="btn btn-primary btn-lg disabled" onclick="sendemail(); return false;"></button>
改变这一行:
submit_button.text('<i class="fa fa-paper-plane" aria-hidden="true"></i>');
至
submit_button.after('<i class="fa fa-paper-plane" aria-hidden="true"></i>');
如果您只想要一个带图标的按钮,最好将字体类添加到按钮中:
submit_button.addClass('fa fa-paper-plane');
你按钮会看:
<button tabindex="4" type="submit" id="submit" class="btn btn-primary btn-lg disabled fa fa-paper-plane" onclick="sendemail(); return false;"></button>
这是一个jsFiddle与以前的HTML
将submit_button.text('...')
更改为submit_button.html('...')
当html
解释html代码时,文本会插入您输入的确切text
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.