twitter-bootstrap - icon - font awesome ttf

Bootstrap 3 sin Glyphicons reemplazado con Font Awesome

Question

Quiero eliminar Bootstrap 3 Glyphicons a favor de Font Awesome. Dado que Font Awesome ya incluye la mayoría de los Glyphicons, no desea incluirlos y evitar duplicados y problemas de compatibilidad.

cuando hago una descarga de inicio personalizada y desactivo el componente glyphicon, todavía veo algunas referencias de glyphicon en el archivo css. http://getbootstrap.com/customize/

¿Cómo puedo deshabilitar esos iconos por completo?

Gracias

Answer 1

Como uso bootstrap con Font Awesome, voy a personalizar la página y deseleccioné el componente glyphicon como lo hiciste, pero durante algún tiempo también agregué estas líneas de código en mi (sobrescribir archivo):

[class^="icon-"],
[class*="icon-"] {
  background: none;
}

también puede abrir el archivo de arranque principal que descargó (personalizado) y buscar font-family: ''Glyphicons Halflings''; de font-family: ''Glyphicons Halflings''; , luego comenta todo el @font-face .

Espero que esto te ayudará

Answer 2

Esas 6 referencias restantes de Glyphicons en el CSS compilado se refieren al uso opcional de Glyphicons para los siguientes botones prev + en el componente Carrusel. Dado que las declaraciones en cuestión también se utilizan para los botones previos a Glyphicon no previos y representan una cantidad absolutamente trivial del tamaño total del archivo, sugiero simplemente ignorarlos. Para todos los propósitos prácticos, ya has eliminado Glyphicons de tu compilación.

Si es absolutamente necesario aniquilar dichas referencias, compile Bootstrap manualmente , eliminando de antemano las líneas ofensivas de bootstrap/less/carousel.less y eliminando @import "glyphicons.less"; línea desde bootstrap/less/bootstrap.less .
O simplemente puede editar manualmente el CSS que Bootstrap Customizer ya generó para usted, ya que las eliminaciones relevantes son triviales.

Answer 3

Solución por less (probado para bootstrap 3.3.5):

Primero, anule los iconos para el carrusel:

// 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 parte está tomada de la respuesta de Slava Fomin , basada en el código base de Steven Clontz.

Siguiente paso: deshabilitar la carga de glyphicons:

//** Load fonts from this directory.
@icon-font-path:          "../fonts/";
//** File name for all font files.
@icon-font-name:          "fontawesome-webfont";
//** Element ID within SVG icon file.
@icon-font-svg-id:        "fontawesomeregular";

No se olvide de la carga lenta de lessc: @icon-font-svg-id y otras vars tendrán el último valor que haya establecido.