Font-Awesome icône avec un événement onclick ensemble

Je suis en train d'essayer d'utiliser les éléments suivants font-awesome icône

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

comme une icône de la corbeille en regard des éléments dans une liste sur ma page comme ceci:

Item 1  delete-icon
Item 2  delete-icon

Sur le clic de l'une de ces icônes-je besoin pour exécuter une fonction JavaScript...

Quel élément html devrais-je être enveloppement de l'icône? J'ai remarqué que lorsque j'utilise une balise d'ancrage, il devient bleu et lorsque j'utilise un bouton, il finit par être enveloppé dans un bouton. Existe-il d'autres options?

Essentiellement, je veux faire ce

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

ou ce

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

Mais ont seulement l'icône apparaît comme sans aucune modification. Pas de couleur bleue, et n'est pas enroulé à l'intérieur d'un bouton.

essayez Ceci.... <un href='javascript:mafonction ();" >Texte <i class="fa fa-moins-cercle"></i></a>
Désolé encore il met en évidence en bleu parce qu'il est considéré comme une balise d'ancrage. Je sais que je pourrais facilement créer un style css pour le rendre noir de nouveau, mais c'était de voir si il y a une meilleure façon.
Comment ajouter un événement de clic, si la police impressionnant icônes sont utilisées dans le pseudoelement comme: &::before{ font-family: "la Police Impressionnant 5 Gratuit"; content : "\f0d9"; display: inline-block; padding-right: 15px; font-weight: 900; }

OriginalL'auteur Blake Rivell | 2016-02-03

  1. 22

    Il suffit d'utiliser un div tag ou span tag 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>
    Meilleure réponse!. Doit être accepté de répondre.
    Malheureusement, cela ne fonctionne pas dans toutes les situations... Edit: ce qui explique peut-être pourquoi aucune réponse n'a été accepté.
    Je ne pense pas que ce est la bonne façon. Surtout depuis HTML5, la sémantique de la matière. Aussi, pour les lecteurs d'écran et de l'accessibilité, un bouton serait probablement mieux. Ne dis pas que j'ai une meilleure idée que de supprimer les styles par défaut de la <button> élément, mais pour moi, votre solution (qui est actuellement utilisé partout) n'a pas l'air bon

    OriginalL'auteur TharinduLucky

  2. 9

    Soit supprimer le contour bleu de la balise d'ancrage avec les CSS ou de définir la onclick-gestionnaire de la police génial icône elle-même:

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

    OriginalL'auteur Johannes Jander

  3. 2

    Ici un moyen d'utiliser la police génial 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}}

    Correspondant JS pour faire d'un événement de clic sur DÉCONNEXION bouton

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

    OriginalL'auteur Puneeth Reddy V