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.

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

Solution 2

Either remove the blue outline from the anchor tag with CSS or set the onclick-handler on the font awesome icon itself:

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

Solution 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.
}