Uso de Font-Awesome: en Chrome, los iconos mostrados a través de <i class = "icon-ok"></i> marca no muestran ningún estilo y no desencadenan ningún evento

Question

Estoy usando Font-Awesome que es fuente icónica para usar con Twitter Bootstrap.

marcado -

<i class="icon-remove reset-preference-button"></i> 

CSS -

.reset-preference-button { 
cursor: pointer; 
} 

JavaScript -

$(".reset-preference-button").on("click", function() { 
// ... do something 
}); 

cuando me hacen la página, el cursor no cambia al puntero cuando flotaba sobre el elemento. Tampoco sucede nada cuando hago clic en el ícono. Me aseguré de que el icono exista antes de enlazar el evento.

Tenga en cuenta que estoy utilizando el elemento & nada más. Parece que cuando establecí explícitamente el estilo de este elemento en "display: inline-block;", funciona bien.

Esto de acuerdo con mis pruebas solo ocurre en Chrome. Funciona bien en FF & IE. Mi versión actual de Chrome es 18 pero también afecta a otras versiones.

que ya ha presentado un error en https://github.com/FortAwesome/Font-Awesome/issues/157

Answer 1

Esto está ocurriendo porque no hay ningún contenido en el elemento <i> - fuente impresionante utiliza el seudo elemento css: antes de hacer que el icono en la CSS.

También podemos establecer una altura y una anchura de 1 em y pantalla mostrada como: bloque

i { 
    width: 1em; 
    height: 1em; 
    display:block; 
    cursor: pointer; 
} 

Answer 2

Un enfoque más limpio es sencillo añadir los estilos al elemento :before (por lo que no tienen que preocuparse el alto o el ancho del objeto).

Aquí es mi CSS código de ejemplo:

i:before { 
    cursor: pointer; 
}