带有 onclick 事件集的 Font-Awesome 图标答案

【问题标题】：Font-Awesome icon with an onclick event set带有 onclick 事件集的 Font-Awesome 图标
【发布时间】：2016-05-13 04:14:35
【问题描述】：

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

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

但只有图标按原样显示，没有修改。没有蓝色，也没有包裹在按钮内。

【问题讨论】：

试试这个.... 文本
抱歉，它仍然以蓝色突出显示，因为它被视为锚标记。我知道我可以轻松地创建一个 css 样式使其再次变黑，但正在查看是否有更好的方法。
如果在伪元素中使用了令人敬畏的字体图标，如何添加点击事件： &::before{ font-family: "Font Awesome 5 Free";内容：“\f0d9”；显示：内联块； padding-right: 15px;字体粗细：900； }

标签： javascript jquery html css font-awesome

【解决方案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>

【讨论】：

不幸的是，这并不适用于所有情况......编辑：这可能是根本没有接受任何答案的原因。
我认为这不是正确的方法。特别是从 HTML5 开始，语义很重要。此外，对于屏幕阅读器和可访问性，按钮可能会更好。并不是说我有比从

【解决方案2】：

要么从锚标记with CSS 中删除蓝色轮廓，要么在字体真棒图标本身上设置onclick-handler：

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

【讨论】：

如果 fontawesome 图标使用 web 字体和 css 渲染，则此方法有效，但如果使用 svg/js 渲染，则无效。例如，在我使用 vuetify 和 fontawesome 图标的应用程序中，图标是使用 svg 呈现的；然后这种技术停止工作：\

【解决方案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.
}

【讨论】：

【解决方案4】：

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

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

【讨论】：