html中有没有办法在按钮元素中包含字体很棒的图标我尝试了十六进制代码，但似乎不起作用，所以我使用了下面的标签
<button id="btnRemoveFave_xxxx" data-customer-id="xxxx" data-product-id="xxxx" type="button" class="btnRemoveFave" value="Remove From Favourites"><i class="fa fa-heart" style="color:#f7296a"></i></button>但我发现很难找到在飞行中改变颜色的图标，并将其放置在按钮中，似乎比I 更容易找到其元素
编辑2
上面不适用于我的原因是我正试图在使用这个的帖子中找到它
var thisButton = $(this);
thisButton.find('.fa-heart').css('color', '#007c7a');
但它根本没有改变我的图标颜色，只需点击下面代码中的按钮。
<script>
$(document).ready(function () {
$(".btnRemoveFave").click(function () {
var productId = $(this).data("product-id");
var customerId = $(this).data("customer-id");
var thisButton = $(this);
$.ajax({
type: "POST",
url: "/dynamic/Favourite.aspx/RemoveFavouriteByCustId",
data: JSON.stringify({ 'custId': customerId, 'productCode': productId }),
contentType: "application/json; charset=utf-8",
dataType: "json",
error: function (xhr, status, error) {
alert(xhr.status);
alert(xhr.responseText);
},
success: function (response) {
alert(response.d);
thisButton.find('.fa-heart').css('color', '#007c7a');
console.log('do i get past here');
},
failure: function (response) {
alert(response.d);
}
});
});
});
</script>
编辑3
这是console.log这个按钮的结果
[按钮#btAddFave_YLXG20.btAddFave，上下文：按钮#btAdd Fave_YCXG20.btAdd Fave]
可以。您可以将Fontawsome图标添加到伪元素：before。
你需要做两件事。
- 将font-family族属性设置为font真棒
- 查找要使用的字体的代码
你的例子很用心，所以它是content: "f004";
示例：
.btnRemoveFave:before {
content: "f004";
font-family: fontawesome;
margin-right: 5px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button id="btnRemoveFave_xxxx" data-customer-id="xxxx" data-product-id="xxxx" type="button" class="btnRemoveFave" value="Remove From Favourites">Remove From Favourites</button>图标代码参考：http://fontawesome.io/cheatsheet/
它很简单，只需在按钮的打开和关闭标签中添加fa图标，并使按钮的背景透明
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.myButton
{
background-color: transparent;
}
.fa{
font-size:30px;
color:#0099ff;
}
</style>
</head>
<body>
<button id="add-job" type="button" class="myButton" >
<i class="fa fa-plus"></i>
</button>
</body>
</html>
当然可以，您可以使用：before或：after伪元素。您可以在W3上阅读更多关于它们的信息。:before会在你的按钮内容之前添加你的炉床，而:after会在之后添加。代码"f004";取自字体真棒图标类的css。你可以在字体很棒的css文件中找到它，或者只需检查一个正常的图标。
#btnRemoveFave_xxxx:before{
font: normal normal normal 14px/1 FontAwesome;
content: "f004";
color:#f7296a;
padding-right: 5px;
}<button id="btnRemoveFave_xxxx" data-customer-id="xxxx" data-product-id="xxxx" type="button" class="btnRemoveFave" value="Remove From Favourites">test</button>工作小提琴：https://jsfiddle.net/j5foocut/
原始问题：https://stackoverflow.com/revisions/45957030/3
Hello您可以使用以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<input type="button" id="btnRemoveFave_xxxx" data-customer-id="xxxx" data-product-id="xxxx" type="button" class="btnRemoveFave" value=" Remove From Favourites" style="font-family:FontAwesome;"/>
</body>
</html>虽然我使用了输入类型"按钮"，但希望它能帮助你