Question

html中是否有一种方法可以在按钮元素中包含字体真棒图标我尝试了十六进制代码并且似乎没有工作所以我使用了下面的标记

<div class="modal-header">
  <h3 class="modal-title">
    {{ 'MODAL.TITLE' | translate }}
  </h3>
</div>

<div class="modal-body">
</div>

<div class="modal-footer">
  <button class="btn btn-primary" type="button" (click)="activeModal.close('Close click')">
    <span class="fa fa-remove"></span> {{ 'BUTTON.CLOSE' | translate }}
  </button>
</div>

但是我发现很难找到在飞行中改变颜色的图标并将其放在按钮本身，好像可能比i更容易找到它的元素。

修改2

为什么以上对我不起作用的原因是我试图在使用此

的帖子中找到它

<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>

但是，点击我在以下代码中输入的按钮，它不会改变我的图标颜色。

    var thisButton = $(this);
    thisButton.find('.fa-heart').css('color', '#007c7a');

编辑3

这是console.log这个按钮的结果

[button＃btnAddFave_YLXG20.btnAddFave，context：button＃btnAddFave_YLXG20.btnAddFave]

Answer 1

是的，你可以。您可以将Fontawsome图标添加到pseudo-element：之前。

您需要做两件事。

将font family-family属性设置为font awesome
找到您要使用的字体的代码。

你的榜样有心，所以它是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/

Answer 2

当然可以，你可以使用：before或：after伪元素。您可以阅读有关它们的更多信息，例如on W3。 :before会在您的按钮内容之前添加您的壁炉，而:after将在之后添加。代码"\f004";取自font-awesome图标类的css。你可以在font-awesome 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

Answer 3

简单的只需在按钮的开始和结束标记中添加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>

Answer 4

您好您可以使用以下代码

＆＃13;

<!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="&#xf004 Remove From Favourites" style="font-family:FontAwesome;"/>

	
</body>
</html>

＆＃13;

虽然我使用了输入类型＆＃34;按钮＆＃34;但希望它可以帮到你

不使用十六进制代码的按钮内的Fontawsome图标

4 个答案: