字体真棒图标，带有点击事件集

Font-Awesome icon with an onclick event set

本文关键字：事件 图标 字体      更新时间：2023-09-26

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

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

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

只需使用带有onclick的div标签或span标签 

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

或 

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

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

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

这里有一种使用字体的方法 真棒 与引导程序。

{{#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在注销按钮上创建单击事件

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

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

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

相关文章：