twitter bootstrap - example - ¿Cómo reemplazar Glyphicons con FontAwesome en Bootstrap 3 sin cambiar HTML?

glyphicon bootstrap 4 icons

Question

Estoy usando Bootstrap 3 en mi proyecto y estoy usando la biblioteca de iconos FontAwesome en lugar de Glyphicons incluidos.

El problema es que tengo algunos componentes de terceros que dependen de Glyphicons y no quiero cambiar su HTML.

Incluyo font-awesome a través de Bower y SASS + Compass (SCSS).

¿Es posible reemplazar Glyphicons con FontAwesome sin cambiar el HTML y aplicar otras clases de CSS?

Answer 1

Hice este Gist para mapear todos los iconos de glyphicon a font-awesome. Calculo que tiene un 95% de precisión y cobertura (glyphicon tiene algunos iconos inútiles que font-awesome no).

https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9

code removed in favor of gist

Aunque esto cargue todos los íconos si elimina todos los íconos de glyphicon de su compilación de arranque, en realidad estará ahorrando unos pocos bytes (- fuente impresionante por supuesto)

Answer 2

Puede usar el siguiente enfoque para sobrecargar clases de Glyphicon CSS con FontAwesome usando SCSS:

// Overloading "glyphicon" class with "fa".
.glyphicon {

    @extend .fa;

    // Overloading "glyphicon-chevron-left" with "fa-arrow-left".
    &.glyphicon-chevron-left {
        @extend .fa-chevron-left;
    }

    // Overloading "glyphicon-chevron-right" with "fa-arrow-right".
    &.glyphicon-chevron-right {
        @extend .fa-chevron-right;
    }
}

Esta solución se basa en el código de Steven Clontz .

Asegúrese de que FontAwesome SCSS se importe antes de que esto se anule.

En el ejemplo anterior, estoy sobrecargando los siguientes dos glifos : chevron-left y chevron-right con los siguientes íconos de FontAwesome : flecha izquierda y flecha derecha respetuosamente.

Tendrá que sobrecargar todos los iconos utilizados en componentes de terceros para lograr lo que necesita.

Sin embargo, considere esto como HACK y NO sobrecargue TODOS los iconos , ¡porque hará que su CSS sea innecesariamente más grande!

Considere convencer a su proveedor externo de que implemente soporte para diferentes bibliotecas de iconos. Esta será una solución adecuada.

Answer 3

En CSS puro, simplemente defina la clase glyphicon con las mismas propiedades que la clase font-awesome (.fa) y haga correspondencia con los íconos deseados:

.glyphicon{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-chevron-left:before{
    content:"/f053"
}
.glyphicon-chevron-right:before{
    content:"/f054"
}