icona Font-Impressionante con un evento onclick impostato

Question

Sto cercando di utilizzare il seguente icona font-impressionante

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

come icona di cancellazione accanto ad elementi di un elenco sulla mia pagina come questa:

Item 1 delete-icon 
Item 2 delete-icon 

su clic di una di queste icone ho bisogno di eseguire una funzione JavaScript ...

Quale elemento html dovrei avvolgendo l'icona con? Ho notato che quando uso un tag di ancoraggio diventa blu e quando uso un pulsante finisce per essere avvolto in un pulsante. Ci sono altre opzioni?

In sostanza voglio fare questo

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

o questo

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

Ma hanno solo l'icona appare come è senza modifiche. Nessun colore blu e non avvolto all'interno di un pulsante.

Answer 1

è sufficiente utilizzare un tag div o span tag con onclick

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

o

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

Answer 2

O rimuovere il contorno blu dal tag di ancoraggio with CSS o impostare il onclick -handler sull'icona impressionante carattere stesso:

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

Answer 3

Ecco un modo per usare il font fantastico con 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}} 

Corrispondente JS per fare un evento click su ESCI pulsante

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