Question

我可以使用以下HTML将字体 - 真棒图标用作按钮文字：

<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>而不是显示实际图标。

Answer 1

使用.html()代替向您的DOM添加HTML标记，否则.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>

Answer 2

更改此行：

stat

到

submit_button.text('<i class="fa fa-paper-plane" aria-hidden="true"></i>');

Answer 3

如果您只想要一个带图标的按钮，最好将字体类添加到按钮中：

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>

这是一个带有之前HTML的jsFiddle

https://jsfiddle.net/s0dw6yp4/1/

Answer 4

将submit_button.text('...')更改为submit_button.html('...')

文字会在text解释html代码时插入您输入的确切html。

无法在提交按钮中动态使用Font Awesome图标

4 个答案: