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

Question

我正在尝试使用以下font-awesome图标

<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在字体awesome图标本身上设置-handler:

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