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.

Stir

try This.... <a href='javascript:myFunction();'>Text <i class="fa fa-minus-circle"></i></a> – Unspoken

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. – Stir

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; } – Avatar

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>

Sultanate

Unfortunately, this doesn't work in every situation... Edit: which might be why no answer was accepted at all. – Meseems

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 <button> element, but to me, your solution (that is currently being used everywhere) does not look good – Prajna

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

Inglorious

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 :\ – Smelly

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

Gazelle

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.

Solanum

Answer 5

In my case AdminLTE 3.2 didn't seem to execute any kind of onclick event in my buttons, but after experimenting I discovered that my button was outside of the card-header DIV, after moving it inside of it the onclick worked :

<button class="btn btn-default btn-sm float-right"
        onclick="alert('123')">  ◄█■■ DOESN'T WORK
  <i class="fa fa-times-circle"></i>
</button>

<div class="card-header">  ◄█■■ VERY IMPORTANT! THE CARD-HEADER DIV

  <button class="btn btn-default btn-sm float-right"
          onclick="alert('456')">  ◄█■■ LOOK MOM, IT WORKS!
    <i class="fa fa-times-circle"></i>
  </button>

There is something about the card-header DIV that makes AdminLTE to run or not the onclick events.

Next are some imports at the bottom of the script :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>

And next are imports at the beginning of the script :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

In case someone wants to reproduce the case.

Habit