Font-Super-Symbol mit einem Onclick-Ereignisse gesetzt

Question

Ich versuche, das folgende Schriftart-awesome Symbol

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

als Symbol Löschen, um Elemente in einer Liste auf meiner Seite wie diese nächsten zu verwenden:

Item 1 delete-icon 
Item 2 delete-icon 

Auf eines dieser Symbole klicken Ich muss eine JavaScript-Funktion ausführen ...

Um welches HTML-Element soll ich das Symbol wickeln? Ich habe bemerkt, dass wenn ich ein Anker-Tag verwende, es blau wird und wenn ich einen Knopf benutze, wird es in einen Knopf gewickelt. Gibt es noch andere Möglichkeiten?

Grunde möchte ich diesen

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

oder dies nur

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

Aber zu tun haben, das Symbol erscheinen als ohne Modifikationen ist. Keine blaue Farbe und nicht in einer Taste eingewickelt.

Answer 1

einfach einen div Tag oder span Tag mit onclick

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

oder

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

Answer 2

verwenden entweder die blaue Kontur von dem Anker-Tag with CSS oder stellen Sie die onclick -Handler auf der Schriftart ehrfürchtigen Symbol entfernen selbst:

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

Answer 3

Hier eine Möglichkeit, die Schriftart super mit Bootstrap zu verwenden.

{{#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 entsprechend ein Click-Ereignis auf LOGOUT Taste Dieses

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