Ícono de Font-Awesome con un conjunto de eventos onclick

3 minutos de lectura

Estoy tratando de usar el siguiente ícono de fuente impresionante

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

como un icono de eliminación junto a los elementos de una lista en mi página como esta:

Item 1  delete-icon
Item 2  delete-icon

Al hacer clic en uno de estos iconos, necesito ejecutar una función de JavaScript…

¿Con qué elemento html debo envolver el ícono? Noté que cuando uso una etiqueta de anclaje se vuelve azul y cuando uso un botón termina envuelto en un botón. ¿Hay más opciones?

Esencialmente quiero hacer esto

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

o esto

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

Pero haz que solo el icono aparezca tal cual, sin modificaciones. Sin color azul, y no envuelto dentro de un botón.

  • prueba esto…. Text

    – CMedina

    03/02/2016 a las 19:33

  • Lo siento, esto todavía lo resalta en azul porque se considera una etiqueta de anclaje. Sé que podría crear fácilmente un estilo css para que vuelva a ser negro, pero estaba viendo si había una mejor manera.

    –Blake Rivell

    03/02/2016 a las 19:38

  • Cómo agregar un evento de clic, si los íconos impresionantes de la fuente se usan en el pseudoelemento como: &::before{ font-family: “Font Awesome 5 Free”; contenido: “\f0d9”; pantalla: bloque en línea; relleno derecho: 15px; peso de fuente: 900; }

    – Ashfaque Rifaye

    9 de marzo de 2019 a las 6:30

Simplemente use un div etiquetar o span etiqueta 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>

  • Desafortunadamente, esto no funciona en todas las situaciones… Editar: lo cual podría ser la razón por la que no se aceptó ninguna respuesta.

    – Excepción no implementada

    11 de junio de 2018 a las 12:09


  • No creo que esta sea la forma adecuada. Especialmente desde HTML5, la semántica importa. Además, para lectores de pantalla y accesibilidad, probablemente sería mejor un botón. No digo que tenga una mejor idea que eliminar los estilos predeterminados del elemento

avatar de usuario
Juan Jander

Quite el contorno azul de la etiqueta de anclaje con CSS o configure el onclick-handler en el icono de fuente impresionante en sí mismo:

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

  • Esto funciona si los íconos de fontawesome se procesan con fuentes web y css, pero no si se procesan con svg/js. Por ejemplo, en mi aplicación que usa vuetify con íconos fontawesome, los íconos se representan usando svg; y luego esta técnica deja de funcionar :\

    – jomofrodo

    25 mayo 2021 a las 21:50

Aquí una forma de usar la fuente impresionante 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="http://stackoverflow.com/login" class="btn btn-primary login-toggle">Register/Login</a>
{{/if}}

JS correspondiente para hacer un evento de clic en CERRAR SESIÓN botón

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

<a style="color: inherit;" onclick="Remove()"><i class="fa fa-minus-circle"></i></a>

Esto tomará el color predeterminado del icono. También puede especificar cualquier color que desee.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad