Javascript 带有 onclick 事件集的 Font-Awesome 图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35185974/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font-Awesome icon with an onclick event set
提问by Blake Rivell
I am trying to use the following font-awesome icon
我正在尝试使用以下字体真棒图标
<i class="fa fa-minus-circle"></i>
as a delete icon next to items in a list on my page like this:
作为我页面上列表中项目旁边的删除图标，如下所示：
Item 1 delete-icon
Item 2 delete-icon
On click of one of these icons I need to run a JavaScript function...
单击这些图标之一后，我需要运行 JavaScript 函数...
What html element should I be wrapping the icon with? I noticed that when I use an anchor tag it turns blue and when I use a button it ends up being wrapped in a button. Are there any other options?
我应该用什么 html 元素来包装图标？我注意到，当我使用锚标签时，它会变成蓝色，而当我使用按钮时，它最终会被包裹在一个按钮中。还有其他选择吗？
Essentially I want to do this
基本上我想这样做
<a onclick="Remove()"><i class="fa fa-minus-circle"></i></a>
or this
或这个
<button onclick="Remove()"><i class="fa fa-minus-circle"></i></button>
But have only the icon appear as is with no modifications. No blue color, and not wrapped inside a button.
但是只有图标按原样显示，没有任何修改。没有蓝色，也没有包裹在按钮内。
回答by TharinduLucky
Simply use a divtag or spantag with onclick
只需使用div标签或span标签onclick
<div onclick="myFunction()">
<i class="fa fa-minus-circle"></i>
</div>
or
或者
<span onclick="myFunction()">
<i class="fa fa-minus-circle"></i>
</span>
回答by Johannes Jander
回答by Puneeth Reddy V
Here a way to use font awesome with bootstrap.
这是一种在 bootstrap 中使用字体 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}}
Corresponding JS to make a click event on LOGOUTbutton
对应JS在LOGOUT按钮上做点击事件
'click .logout':() =>{
//your JS functionality.
}
