Font-Awesome icon with onclick event set

Question

I'm 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, for example:

 Item 1 delete-icon Item 2 delete-icon 

When clicking on one of these icons, I need to run the JavaScript function ...

What html element should I wrap with an icon? I noticed that when I use the anchor tag, it turns blue, and when I use the button, it turns out to be wrapped in the button. Are there any other options?

Essentially, I want to do this.

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

or

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

But there is only an icon that is displayed unchanged. There is no blue color, not inside the button.

Answer 1

Just use 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

Either remove the blue outline from the anchor tag using CSS or set onclick -handler on the font sign itself:

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

Answer 3

Here you can use the awesome font 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 the click event on the LOGOUT button

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