HTML 输入内的 Font Awesome 图标，Angular 正常工作

Question

我正在尝试做这个，但运气不太好：

<input type="button" class="naviaBtn naviaBlue" ng-show="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)"  value="outstanding swipes"><i class="fa fa-exclamation-circle" ng-show="ppt.Swipes != null"></i></input>

问题不存在，直到我知道我需要图标，但由于 HTML 兼容，我无法使这项工作如此出色。尝试将按钮输入类型切换为具有相同逻辑的锚点，但不行。有想法吗？

非常感谢。

Answer 1

使用 Button 而不是 Input，如下所示

<button class="naviaBtn naviaBlue" ng-show="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)"  value="outstanding swipes"><i class="fa fa-exclamation-circle" ng-show="ppt.Swipes != null"></i></button>

对于 Input，您只能使用文本，而 Button 可以有 img 或 i 等子元素

Answer 2

使用Button就可以了！

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<button class="naviaBtn naviaBlue" ng-show="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)"  >outstanding swipes <i class="fa fa-exclamation-circle" ng-show="ppt.Swipes != null"></i></button>

<br/> 
<span>More examples with link, from font awesome site:</span> <br/>

<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>

HTML 输入内的 Font Awesome 图标，Angular 正常工作

Font Awesome icon inside of HTML input with Angular working

html

angularjs

font-awesome