带有 onclick 事件集的很棒的字体图标

Question

我正在尝试使用以下字体很棒的图标

<i class="fa fa-minus-circle"></i>

作为我页面列表中项目旁边的删除图标，如下所示：

Item 1  delete-icon
Item 2  delete-icon

单击这些图标之一时，我需要运行 JavaScript 函数...

我应该用什么 html 元素包裹图标？我注意到，当我使用锚标记时，它会变成蓝色，当我使用按钮时，它最终会被包裹在按钮中。还有其他选择吗？

本质上我想这样做

<a onclick="Remove()"><i class="fa fa-minus-circle"></i></a>

或者这个

<button onclick="Remove()"><i class="fa fa-minus-circle"></i></button>

但只显示图标，不做任何修改。没有蓝色，也没有包裹在按钮内。

Answer 1

只需使用

div

标签或

span

标签与

onclick

<div onclick="myFunction()">
       <i class="fa fa-minus-circle"></i>
</div>

或

<span onclick="myFunction()">
     <i class="fa fa-minus-circle"></i>
</span>

Answer 2

使用CSS从锚标记中删除蓝色轮廓，或者在字体真棒图标本身上设置

onclick

处理程序：

<i class="fa fa-minus-circle" onclick="Remove()"></i>

Answer 3

这是一种通过 bootstrap 使用 font Awesome 的方法。

{{#if currentUser}}
    <a class="btn btn-large btn-primary logout" href="#">
        <i class="fa fa-sign-out" aria-hidden="true">Logout</i>
    </a>
{{else}}
    <a href="/login" class="btn btn-primary login-toggle">Register/Login</a>
{{/if}}

对应JS对LOGOUT按钮制作点击事件

'click .logout':() =>{
//your JS functionality.
}

Answer 4

<a style="color: inherit;" onclick="Remove()"><i class="fa fa-minus-circle"></i></a>

这将采用图标的默认颜色。 您还可以根据需要指定任何颜色。

Answer 5

在我的例子中，AdminLTE 3.2 似乎没有在我的按钮中执行任何类型的内联 JavaScript，但经过实验，我发现我的按钮位于 card-header DIV 的

outside

，将其移动到 JavaScript 的 inside 后工作过：

<button class="btn btn-default btn-sm float-right"
        data-widget="collapse" onclick="alert('123')">  ◄█■■ DOESN'T WORK
  <i class="fa fa-times-circle"></i>
</button>

<div class="card-header">  ◄█■■ VERY IMPORTANT! THE CARD-HEADER DIV

  <button class="btn btn-default btn-sm float-right"
          data-widget="collapse" onclick="alert('456')">  ◄█■■ MOM, IT WORKS!
    <i class="fa fa-times-circle"></i>
  </button>

关于

card-header

DIV 的某些内容使 AdminLTE 运行或不运行内联 JavaScript。