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

使用输入，您只能使用文本，而按钮可以像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>

使用Angular工作的HTML输入中的Font Awesome图标

2 个答案: