[英]Unable to dynamically use Font Awesome icon in submit button
I am able to use a font-awesome icon as button text using the following HTML: 我可以使用以下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>
However, I need to do this dynamically using JQuery: 但是,我需要使用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>');
The above JQuery outputs the font-awesome element as a text tag, ie the button says <i class="fa fa-paper-plane" aria-hidden="true"></i>
instead of showing the actual icon. 上面的JQuery将font-awesome元素输出为文本标签,即按钮显示
<i class="fa fa-paper-plane" aria-hidden="true"></i>
而不是显示实际图标。
Use .html()
instead to add HTML tags to your DOM, else the .text()
will add the code as text : 使用
.html()
代替将HTML标记添加到DOM,否则.text()
会将代码添加为文本:
submit_button.html('<i class="fa fa-paper-plane" aria-hidden="true"></i>');
Hope this helps. 希望这可以帮助。
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>
Change this line: 改变这一行:
submit_button.text('<i class="fa fa-paper-plane" aria-hidden="true"></i>');
to 至
submit_button.after('<i class="fa fa-paper-plane" aria-hidden="true"></i>');
If you want a button only with a icon the better is to add the font class into the button : 如果您只想要一个带图标的按钮,最好将字体类添加到按钮中:
submit_button.addClass('fa fa-paper-plane');
You button will look at: 你按钮会看:
<button tabindex="4" type="submit" id="submit" class="btn btn-primary btn-lg disabled fa fa-paper-plane" onclick="sendemail(); return false;"></button>
This is a jsFiddle with the previous HTML 这是一个jsFiddle与以前的HTML
https://jsfiddle.net/s0dw6yp4/1/ https://jsfiddle.net/s0dw6yp4/1/
Change submit_button.text('...')
to submit_button.html('...')
将
submit_button.text('...')
更改为submit_button.html('...')
Text inserts the exact text
you entered while html
interprets the html-code. 当
html
解释html代码时,文本会插入您输入的确切text
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.