html - font - Bootstrap 3 Glyphicons CDN

glyphicon glyphicon (3)

¡PRESTA ATENCIÓN!
Los íconos de Bootstrap están de vuelta después de la fusión de solicitud de extracción .
Después de ir y venir durante las últimas dos semanas, he decidido restaurar la fuente del icono de Glyphicons al repositorio principal . Dado lo prevalentes que son los íconos en las IU, probablemente sea un perjuicio para la mayoría de las personas no incluirlos (o alguna otra fuente de íconos) en el mismo lugar que el CSS y el JS.
Con esta actualización viene lo siguiente:
Restaura la documentación (en la página Componentes)
Nuevas variables, @icon-font-path y @icon-font-name , para una mayor flexibilidad al agregar y eliminar fuentes de iconos
Actualizaciones a los últimos Glyphicons (agregando 40 iconos nuevos)
Elimina la antigua mención Glyphicons de la página CSS
Trabajaremos para mejorar la personalización de las fuentes de los iconos en el futuro, de manera que intercambiar las bibliotecas de fuentes puede ser más fácil (que fue toda la motivación para la eliminación original).

¿Cuál es la URL CDN de la nueva versión de Twitter Bootstrap Glyphicons?

Desde Bootstrap 3 se movieron a un repositorio separado , pero no encontré ningún CDN.

De la documentación oficial:

Con el lanzamiento de Bootstrap 3, los iconos se han movido a un repositorio separado. Esto mantiene el proyecto principal lo más esbelto posible, facilita a las personas intercambiar bibliotecas de iconos y hace que las fuentes del icono de Glyphicons estén más disponibles para más personas fuera de Bootstrap.

En el sitio web oficial , no proporcionan una URL de CDN para los iconos.

¿Dónde puede encontrarlo? No quiero descargar el repositorio e incluirlo en mi proyecto.

Aunque Bootstrap CDN restauró los glyphicons a bootstrap.min.css, los archivos Bootswatch CDS Bootswatch css no incluyen glyphicons.

Por ejemplo, el tema Amelia: http://bootswatch.com/amelia/

Default Amelia tiene glyphicons en este archivo: http://bootswatch.com/amelia/bootstrap.min.css

Pero el archivo css de Bootstrap CDN no incluye glyphicons: netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/…

Así que como @edsioufi mencionó, debes incluir que debes incluir glphicons css, si usas archivos de Bootswatch desde el CDN bootstrap. Archivo: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

Con el lanzamiento reciente de bootstrap 3 , y los glyphicons se fusionaron de nuevo con el repositorio principal de Bootstrap, Bootstrap CDN ahora está sirviendo el css Bootstrap 3.0 completo que incluye Glyphicons . La referencia de css de Bootstrap es todo lo que necesita incluir: los glifos y sus dependencias están en rutas relativas en el sitio de CDN y se mencionan en bootstrap.min.css .

En html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

En css:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Aquí hay una demo funcional.

Tenga en cuenta que debe usar clases .glyphicon lugar de .icon :

Ejemplo:

<span class="glyphicon glyphicon-heart"></span>

También tenga en cuenta que aún necesitará incluir bootstrap.min.js para el uso de los componentes JavaScript de Bootstrap, consulte Bootstrap CDN para la url.

Si desea usar los Glyphicons por separado , puede hacer eso al hacer referencia directamente al Css de Glyphicons en Bootstrap CDN .

En html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

En css:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

Como el archivo css ya incluye todas las dependencias necesarias de Glyphicons (que están en una ruta relativa en el sitio CDN de Bootstrap), agregar todo el archivo css es suficiente para comenzar a usar Glyphicons.

Aquí hay una demo funcional de los Glyphicons sin Bootstrap.

Una alternativa sería utilizar Font-Awesome para los iconos:

Incluye Font-Awesome

Abre Font-Awesome en CDNJS y copia el URL de CSS de la última versión:

<link rel="stylesheet" href="<url>">

O en CSS

@import url("<url>");

Por ejemplo (nota, la versión cambiará):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Uso:

<i class="fa fa-bed"></i>

¡Contiene muchos iconos !