我正在尝试使用以下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>
但是只有图标显示为没有修改。没有蓝色,没有包裹在按钮内。
答案 0 :(得分:24)
只需在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>
答案 1 :(得分:9)
从锚标记with CSS中删除蓝色轮廓或在字体真棒图标本身上设置onclick
- 处理程序:
<i class="fa fa-minus-circle" onclick="Remove()"></i>
答案 2 :(得分:2)
这是一种使用字体awesome和bootstrap的方法。
{{#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.
}
答案 3 :(得分:0)
<a style="color: inherit;" onclick="Remove()"><i class="fa fa-minus-circle"></i></a>
这将采用图标的默认颜色。 您还可以根据需要指定任何颜色。