30

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.

Blake Rivell
  • 13,105
  • 31
  • 115
  • 231
  • 1
    try This.... Text – CMedina Feb 03 '16 at 19:33
  • Sorry this still highlights it in blue because it is considered an anchor tag. I know I could easily create a css style to make it black again, but was seeing if there was a better way. – Blake Rivell Feb 03 '16 at 19:38
  • How to add a click event, if the font awesome icons are used in the pseudoelement like: &::before{ font-family: "Font Awesome 5 Free"; content : "\f0d9"; display: inline-block; padding-right: 15px; font-weight: 900; } – Ashfaque Rifaye Mar 09 '19 at 06:30

4 Answers4

50

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>
Tharindu Thisarasinghe
  • 3,846
  • 8
  • 39
  • 70
  • 1
    Unfortunately, this doesn't work in every situation... Edit: which might be why no answer was accepted at all. – NotImplementedException Jun 11 '18 at 12:09
  • 1
    I dont think this is the proper way. Especially since HTML5, semantics matter. Also, for screen readers and accessibility, a button would probably be better. Not saying I have a better idea than removing default styles from the – phil294 Nov 10 '18 at 14:22
16

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>
Community
  • 1
  • 1
Johannes Jander
  • 4,974
  • 2
  • 31
  • 46
  • 5
    This works if the fontawesome icons are being rendered with web fonts and css, but not if they are rendered with svg/js. For example, in my app which uses vuetify with fontawesome icons, the icons are rendered using svg; and then this technique stops working :\ – jomofrodo May 25 '21 at 21:50
2

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.
}
Puneeth Reddy V
  • 1,538
  • 13
  • 28
0
<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.

Sadhvi
  • 1