[英]Font-Awesome icon with an onclick event set
我正在尝试使用以下字体真棒图标
<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
程序:
<i class="fa fa-minus-circle" onclick="Remove()"></i>
这是一种在 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}}
对应JS在LOGOUT按钮上做点击事件
'click .logout':() =>{
//your JS functionality.
}
<a style="color: inherit;" onclick="Remove()"><i class="fa fa-minus-circle"></i></a>
这将采用图标的默认颜色。 您还可以根据需要指定任何颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.