Font-Awesome icon with an onclick event set

Question

I am trying to use the following font-awesome icon

<i class="fa fa-minus-circle"></i>

as a delete icon next to items in a list on my page like this:

Item 1  delete-icon
Item 2  delete-icon

On click of one of these icons I need to run a JavaScript function...

What html element should I be wrapping the icon with? I noticed that when I use an anchor tag it turns blue and when I use a button it ends up being wrapped in a button. Are there any other options?

Essentially I want to do this

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

or this

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

But have only the icon appear as is with no modifications. No blue color, and not wrapped inside a button.

Answer 1

Simply use a div tag or span tag with onclick

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

or

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

Answer 2

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

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

Answer 3

Here a way to use font awesome with 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}}

Corresponding JS to make a click event on LOGOUT button

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

Answer 4

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

This will take the default color of the icon. You can also specify any color, you wish.