web-dev-qa-db-ja.com

onclickイベントが設定されたFont-Awesomeアイコン

次のフォントの素晴らしいアイコンを使用しようとしています

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

次のように、私のページのリストのアイテムの横にある削除アイコンとして：

Item 1  delete-icon
Item 2  delete-icon

これらのアイコンのいずれかをクリックすると、JavaScript関数を実行する必要があります...

アイコンをラップするHTML要素は何ですか？アンカータグを使用すると青色に変わり、ボタンを使用するとボタンにラップされることに気付きました。他のオプションはありますか？

基本的にこれをやりたい

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

またはこれ

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

ただし、変更せずにアイコンのみをそのまま表示します。青色ではなく、ボタンの内側にラップされていません。

javascriptjqueryhtmlcssfont-awesome
19
Blake Rivell

divタグまたはspanタグとonclickを使用するだけです

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

または

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

アンカータグから青いアウトラインを削除します with CSS またはフォントawesomeアイコン自体にonclick- handlerを設定します：

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

ここで、ブートストラップで素晴らしいフォントを使用する方法。

{{#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}}

[〜＃〜] logout [〜＃〜]ボタンでクリックイベントを作成するための対応するJS

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