web-dev-qa-db-fra.com

Icône Font-Awesome avec un ensemble d'événements onclick

J'essaie d'utiliser l'icône suivante font-awesome

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

en tant qu'icône de suppression en regard d'éléments dans une liste de ma page, comme ceci:

Item 1  delete-icon
Item 2  delete-icon

En cliquant sur l'une de ces icônes, je dois exécuter une fonction JavaScript ...

Avec quel élément HTML devrais-je envelopper l'icône? J'ai remarqué que lorsque j'utilise une balise d'ancrage, celle-ci devient bleue et lorsque j'utilise un bouton, elle est enveloppée dans un bouton. Il y a-t-il des alternatives?

Essentiellement je veux faire ça

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

ou ca

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

Mais que l'icône apparaisse telle quelle, sans aucune modification. Pas de couleur bleue, et pas enveloppé dans un bouton.

javascriptjqueryhtmlcssfont-awesome
19
Blake Rivell

Utilisez simplement une balise div ou span avec onclick

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

ou

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

Supprimez le contour bleu de la balise d'ancrage avec CSS ou définissez le gestionnaire onclick- sur l'icône de police impressionnante elle-même:

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

Voici un moyen d'utiliser une police géniale avec 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}}

JS correspondant pour créer un événement de clic sur le bouton LOGOUT 

'click .logout':() =>{
//your JS functionality.
}
2
Puneeth Reddy V