Font-Awesome icon с набором событий onclick

Я пытаюсь использовать следующий шрифт - удивительный значок

<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>

Но есть только значок, который отображается без изменений. Нет синего цвета, а не внутри кнопки.

Ответ 1

Просто используйте тег 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>

Ответ 2

Либо удалите синий контур из тега привязки с помощью CSS или установите onclick -handler на самом знаке шрифта:

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

Ответ 3

Здесь можно использовать шрифт awesome с бутстрапом.

{{#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, чтобы сделать событие click на кнопке LOGOUT

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