Bootstrap 3 Glyphicons CDN

Question 1

¡PRESTA ATENCIÓN!

Los iconos de Bootstrap están de vuelta después de la fusión de esta solicitud de extracción .

Después de ir y venir sobre esto durante las últimas semanas, he decidido restaurar la fuente del icono de Glyphicons en el repositorio principal . Dado lo frecuentes que son los íconos en las IU, probablemente sea un flaco favor para la mayoría de la gente no incluirlos (o alguna otra fuente de íconos) en el mismo lugar que CSS y JS.

Con esta actualización viene lo siguiente:

Restaura la documentación (en la página Componentes)

Nuevas variables @icon-font-pathy @icon-font-nameflexibilidad para agregar y eliminar fuentes de iconos

Actualizaciones a los últimos Glyphicons (agregando 40 íconos nuevos)

Elimina la mención antigua de Glyphicons de la página CSS

Trabajaremos para mejorar la personalización de las fuentes de iconos en el futuro para que el intercambio de bibliotecas de fuentes sea más fácil (que fue la principal motivación para la eliminación original).

¿Cuál es la URL de 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 íconos se han movido a un repositorio separado. Esto mantiene el proyecto principal lo más sencillo posible, facilita a las personas el intercambio de bibliotecas de iconos y hace que las fuentes de iconos de Glyphicons estén más disponibles para más personas fuera de Bootstrap.

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

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

Question 2

Con el lanzamiento reciente de bootstrap 3 , y los glyphicons que se fusionaron con el repositorio principal de Bootstrap, Bootstrap CDN ahora ofrece el CSS completo de Bootstrap 3.0, incluidos los Glyphicons . La referencia css de Bootstrap es todo lo que necesita incluir: Glyphicons y sus dependencias están en rutas relativas en el sitio CDN y se hace referencia 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 demostración funcional .

Tenga en cuenta que debe usar .glyphiconclases en lugar de .icon:

Ejemplo:

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

También tenga en cuenta que todavía necesitaría incluir bootstrap.min.jspara el uso de componentes JavaScript de Bootstrap, consulte Bootstrap CDN para obtener la URL.

Si desea utilizar los Glyphicons por separado , puede hacerlo haciendo 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");

Desde el css archivo ya incluye todas las dependencias necesarias de Glyphicons (que se encuentran en una ruta relativa en el sitio de Bootstrap CDN), agregar el cssarchivo es todo lo que hay que hacer para comenzar a usar Glyphicons.

Aquí hay una demostración funcional de Glyphicons sin Bootstrap.

Question 3

Una alternativa sería usar Font-Awesome para íconos:

Incluyendo Font-Awesome

Abra Font-Awesome en CDNJS y copie la URL 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 íconos !

Question 4

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

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

Amelia predeterminada tiene glifos en este archivo: http://bootswatch.com/amelia/bootstrap.min.css

Pero el archivo css de Bootstrap CDN no incluye glifos: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

Entonces, como mencionó @edsioufi, debe incluir debe incluir glphicons css, si usa archivos Bootswatch de bootstrap CDN. Archivo: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

Question 5

Si solo desea tener iconos de glyphicons sin ningún css adicional, puede crear un archivo css y poner el código a continuación e incluirlo en el archivo css principal.

Tengo que crear este archivo adicional ya que el enlace de abajo también estaba jugando con los estilos de mi sitio.

//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

En lugar de usarlo directamente, creé un archivo css bootstrap-glyphicons.css

@font-face{font-family:'Glyphicons Halflings';src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
.glyphicon-asterisk:before{content:"\2a";}
.glyphicon-plus:before{content:"\2b";}
.glyphicon-euro:before{content:"\20ac";}
.glyphicon-minus:before{content:"\2212";}
.glyphicon-cloud:before{content:"\2601";}
.glyphicon-envelope:before{content:"\2709";}
.glyphicon-pencil:before{content:"\270f";}
.glyphicon-glass:before{content:"\e001";}
.glyphicon-music:before{content:"\e002";}
.glyphicon-search:before{content:"\e003";}
.glyphicon-heart:before{content:"\e005";}
.glyphicon-star:before{content:"\e006";}
.glyphicon-star-empty:before{content:"\e007";}
.glyphicon-user:before{content:"\e008";}
.glyphicon-film:before{content:"\e009";}
.glyphicon-th-large:before{content:"\e010";}
.glyphicon-th:before{content:"\e011";}
.glyphicon-th-list:before{content:"\e012";}
.glyphicon-ok:before{content:"\e013";}
.glyphicon-remove:before{content:"\e014";}
.glyphicon-zoom-in:before{content:"\e015";}
.glyphicon-zoom-out:before{content:"\e016";}
.glyphicon-off:before{content:"\e017";}
.glyphicon-signal:before{content:"\e018";}
.glyphicon-cog:before{content:"\e019";}
.glyphicon-trash:before{content:"\e020";}
.glyphicon-home:before{content:"\e021";}
.glyphicon-file:before{content:"\e022";}
.glyphicon-time:before{content:"\e023";}
.glyphicon-road:before{content:"\e024";}
.glyphicon-download-alt:before{content:"\e025";}
.glyphicon-download:before{content:"\e026";}
.glyphicon-upload:before{content:"\e027";}
.glyphicon-inbox:before{content:"\e028";}
.glyphicon-play-circle:before{content:"\e029";}
.glyphicon-repeat:before{content:"\e030";}
.glyphicon-refresh:before{content:"\e031";}
.glyphicon-list-alt:before{content:"\e032";}
.glyphicon-flag:before{content:"\e034";}
.glyphicon-headphones:before{content:"\e035";}
.glyphicon-volume-off:before{content:"\e036";}
.glyphicon-volume-down:before{content:"\e037";}
.glyphicon-volume-up:before{content:"\e038";}
.glyphicon-qrcode:before{content:"\e039";}
.glyphicon-barcode:before{content:"\e040";}
.glyphicon-tag:before{content:"\e041";}
.glyphicon-tags:before{content:"\e042";}
.glyphicon-book:before{content:"\e043";}
.glyphicon-print:before{content:"\e045";}
.glyphicon-font:before{content:"\e047";}
.glyphicon-bold:before{content:"\e048";}
.glyphicon-italic:before{content:"\e049";}
.glyphicon-text-height:before{content:"\e050";}
.glyphicon-text-width:before{content:"\e051";}
.glyphicon-align-left:before{content:"\e052";}
.glyphicon-align-center:before{content:"\e053";}
.glyphicon-align-right:before{content:"\e054";}
.glyphicon-align-justify:before{content:"\e055";}
.glyphicon-list:before{content:"\e056";}
.glyphicon-indent-left:before{content:"\e057";}
.glyphicon-indent-right:before{content:"\e058";}
.glyphicon-facetime-video:before{content:"\e059";}
.glyphicon-picture:before{content:"\e060";}
.glyphicon-map-marker:before{content:"\e062";}
.glyphicon-adjust:before{content:"\e063";}
.glyphicon-tint:before{content:"\e064";}
.glyphicon-edit:before{content:"\e065";}
.glyphicon-share:before{content:"\e066";}
.glyphicon-check:before{content:"\e067";}
.glyphicon-move:before{content:"\e068";}
.glyphicon-step-backward:before{content:"\e069";}
.glyphicon-fast-backward:before{content:"\e070";}
.glyphicon-backward:before{content:"\e071";}
.glyphicon-play:before{content:"\e072";}
.glyphicon-pause:before{content:"\e073";}
.glyphicon-stop:before{content:"\e074";}
.glyphicon-forward:before{content:"\e075";}
.glyphicon-fast-forward:before{content:"\e076";}
.glyphicon-step-forward:before{content:"\e077";}
.glyphicon-eject:before{content:"\e078";}
.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}
.glyphicon-plus-sign:before{content:"\e081";}
.glyphicon-minus-sign:before{content:"\e082";}
.glyphicon-remove-sign:before{content:"\e083";}
.glyphicon-ok-sign:before{content:"\e084";}
.glyphicon-question-sign:before{content:"\e085";}
.glyphicon-info-sign:before{content:"\e086";}
.glyphicon-screenshot:before{content:"\e087";}
.glyphicon-remove-circle:before{content:"\e088";}
.glyphicon-ok-circle:before{content:"\e089";}
.glyphicon-ban-circle:before{content:"\e090";}
.glyphicon-arrow-left:before{content:"\e091";}
.glyphicon-arrow-right:before{content:"\e092";}
.glyphicon-arrow-up:before{content:"\e093";}
.glyphicon-arrow-down:before{content:"\e094";}
.glyphicon-share-alt:before{content:"\e095";}
.glyphicon-resize-full:before{content:"\e096";}
.glyphicon-resize-small:before{content:"\e097";}
.glyphicon-exclamation-sign:before{content:"\e101";}
.glyphicon-gift:before{content:"\e102";}
.glyphicon-leaf:before{content:"\e103";}
.glyphicon-eye-open:before{content:"\e105";}
.glyphicon-eye-close:before{content:"\e106";}
.glyphicon-warning-sign:before{content:"\e107";}
.glyphicon-plane:before{content:"\e108";}
.glyphicon-random:before{content:"\e110";}
.glyphicon-comment:before{content:"\e111";}
.glyphicon-magnet:before{content:"\e112";}
.glyphicon-chevron-up:before{content:"\e113";}
.glyphicon-chevron-down:before{content:"\e114";}
.glyphicon-retweet:before{content:"\e115";}
.glyphicon-shopping-cart:before{content:"\e116";}
.glyphicon-folder-close:before{content:"\e117";}
.glyphicon-folder-open:before{content:"\e118";}
.glyphicon-resize-vertical:before{content:"\e119";}
.glyphicon-resize-horizontal:before{content:"\e120";}
.glyphicon-hdd:before{content:"\e121";}
.glyphicon-bullhorn:before{content:"\e122";}
.glyphicon-certificate:before{content:"\e124";}
.glyphicon-thumbs-up:before{content:"\e125";}
.glyphicon-thumbs-down:before{content:"\e126";}
.glyphicon-hand-right:before{content:"\e127";}
.glyphicon-hand-left:before{content:"\e128";}
.glyphicon-hand-up:before{content:"\e129";}
.glyphicon-hand-down:before{content:"\e130";}
.glyphicon-circle-arrow-right:before{content:"\e131";}
.glyphicon-circle-arrow-left:before{content:"\e132";}
.glyphicon-circle-arrow-up:before{content:"\e133";}
.glyphicon-circle-arrow-down:before{content:"\e134";}
.glyphicon-globe:before{content:"\e135";}
.glyphicon-tasks:before{content:"\e137";}
.glyphicon-filter:before{content:"\e138";}
.glyphicon-fullscreen:before{content:"\e140";}
.glyphicon-dashboard:before{content:"\e141";}
.glyphicon-heart-empty:before{content:"\e143";}
.glyphicon-link:before{content:"\e144";}
.glyphicon-phone:before{content:"\e145";}
.glyphicon-usd:before{content:"\e148";}
.glyphicon-gbp:before{content:"\e149";}
.glyphicon-sort:before{content:"\e150";}
.glyphicon-sort-by-alphabet:before{content:"\e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"\e152";}
.glyphicon-sort-by-order:before{content:"\e153";}
.glyphicon-sort-by-order-alt:before{content:"\e154";}
.glyphicon-sort-by-attributes:before{content:"\e155";}
.glyphicon-sort-by-attributes-alt:before{content:"\e156";}
.glyphicon-unchecked:before{content:"\e157";}
.glyphicon-expand:before{content:"\e158";}
.glyphicon-collapse-down:before{content:"\e159";}
.glyphicon-collapse-up:before{content:"\e160";}
.glyphicon-log-in:before{content:"\e161";}
.glyphicon-flash:before{content:"\e162";}
.glyphicon-log-out:before{content:"\e163";}
.glyphicon-new-window:before{content:"\e164";}
.glyphicon-record:before{content:"\e165";}
.glyphicon-save:before{content:"\e166";}
.glyphicon-open:before{content:"\e167";}
.glyphicon-saved:before{content:"\e168";}
.glyphicon-import:before{content:"\e169";}
.glyphicon-export:before{content:"\e170";}
.glyphicon-send:before{content:"\e171";}
.glyphicon-floppy-disk:before{content:"\e172";}
.glyphicon-floppy-saved:before{content:"\e173";}
.glyphicon-floppy-remove:before{content:"\e174";}
.glyphicon-floppy-save:before{content:"\e175";}
.glyphicon-floppy-open:before{content:"\e176";}
.glyphicon-credit-card:before{content:"\e177";}
.glyphicon-transfer:before{content:"\e178";}
.glyphicon-cutlery:before{content:"\e179";}
.glyphicon-header:before{content:"\e180";}
.glyphicon-compressed:before{content:"\e181";}
.glyphicon-earphone:before{content:"\e182";}
.glyphicon-phone-alt:before{content:"\e183";}
.glyphicon-tower:before{content:"\e184";}
.glyphicon-stats:before{content:"\e185";}
.glyphicon-sd-video:before{content:"\e186";}
.glyphicon-hd-video:before{content:"\e187";}
.glyphicon-subtitles:before{content:"\e188";}
.glyphicon-sound-stereo:before{content:"\e189";}
.glyphicon-sound-dolby:before{content:"\e190";}
.glyphicon-sound-5-1:before{content:"\e191";}
.glyphicon-sound-6-1:before{content:"\e192";}
.glyphicon-sound-7-1:before{content:"\e193";}
.glyphicon-copyright-mark:before{content:"\e194";}
.glyphicon-registration-mark:before{content:"\e195";}
.glyphicon-cloud-download:before{content:"\e197";}
.glyphicon-cloud-upload:before{content:"\e198";}
.glyphicon-tree-conifer:before{content:"\e199";}
.glyphicon-tree-deciduous:before{content:"\e200";}
.glyphicon-briefcase:before{content:"\1f4bc";}
.glyphicon-calendar:before{content:"\1f4c5";}
.glyphicon-pushpin:before{content:"\1f4cc";}
.glyphicon-paperclip:before{content:"\1f4ce";}
.glyphicon-camera:before{content:"\1f4f7";}
.glyphicon-lock:before{content:"\1f512";}
.glyphicon-bell:before{content:"\1f514";}
.glyphicon-bookmark:before{content:"\1f516";}
.glyphicon-fire:before{content:"\1f525";}
.glyphicon-wrench:before{content:"\1f527";}

Expandir fragmento

E importé el archivo css creado en mi archivo css principal, lo que me permite importar solo los glifos. Espero que esto ayude

@import url("bootstrap-glyphicons.css");

Answer 1

¡PRESTA ATENCIÓN!

Los iconos de Bootstrap están de vuelta después de la fusión de esta solicitud de extracción .

Después de ir y venir sobre esto durante las últimas semanas, he decidido restaurar la fuente del icono de Glyphicons en el repositorio principal . Dado lo frecuentes que son los íconos en las IU, probablemente sea un flaco favor para la mayoría de la gente no incluirlos (o alguna otra fuente de íconos) en el mismo lugar que CSS y JS.

Con esta actualización viene lo siguiente:

Restaura la documentación (en la página Componentes)

Nuevas variables @icon-font-pathy @icon-font-nameflexibilidad para agregar y eliminar fuentes de iconos

Actualizaciones a los últimos Glyphicons (agregando 40 íconos nuevos)

Elimina la mención antigua de Glyphicons de la página CSS

Trabajaremos para mejorar la personalización de las fuentes de iconos en el futuro para que el intercambio de bibliotecas de fuentes sea más fácil (que fue la principal motivación para la eliminación original).

¿Cuál es la URL de 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 íconos se han movido a un repositorio separado. Esto mantiene el proyecto principal lo más sencillo posible, facilita a las personas el intercambio de bibliotecas de iconos y hace que las fuentes de iconos de Glyphicons estén más disponibles para más personas fuera de Bootstrap.

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

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

Answer 2

1

Los archivos CSS del tema Bootswatch de Boostrap CDN no incluyen glifos, ¿verdad? Archivo: netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/…

trante

Answer 3

Con el lanzamiento reciente de bootstrap 3 , y los glyphicons que se fusionaron con el repositorio principal de Bootstrap, Bootstrap CDN ahora ofrece el CSS completo de Bootstrap 3.0, incluidos los Glyphicons . La referencia css de Bootstrap es todo lo que necesita incluir: Glyphicons y sus dependencias están en rutas relativas en el sitio CDN y se hace referencia 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 demostración funcional .

Tenga en cuenta que debe usar .glyphiconclases en lugar de .icon:

Ejemplo:

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

También tenga en cuenta que todavía necesitaría incluir bootstrap.min.jspara el uso de componentes JavaScript de Bootstrap, consulte Bootstrap CDN para obtener la URL.

Si desea utilizar los Glyphicons por separado , puede hacerlo haciendo 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");

Desde el css archivo ya incluye todas las dependencias necesarias de Glyphicons (que se encuentran en una ruta relativa en el sitio de Bootstrap CDN), agregar el cssarchivo es todo lo que hay que hacer para comenzar a usar Glyphicons.

Aquí hay una demostración funcional de Glyphicons sin Bootstrap.

Answer 4

Mmmm interesante. Parece ser la respuesta correcta, pero los iconos no aparecen cuando se cambia a esta URL. La fuente impresionante funciona bien. Se carga el archivo CSS con las reglas del icono. ¿Necesito algo más? Imagenes

Ionică Bizău

Answer 5

@John ツ La primera clase en el archivo CSS es una clase @ font-face que importa todos los archivos de fuentes necesarios (incluido svgun archivo de imagen), que se encuentran en una ruta relativa en el sitio de Bootstrap CDN . Entonces no necesitas nada más.

edsioufi

Answer 6

Gracias por la demo. Lo echaré un vistazo más tarde y aceptaré esta respuesta, ya que pronto mi solicitud funciona. Edite su respuesta y agregue el contenido de los comentarios a la identificación. ¡Gracias!

Ionică Bizău

Answer 7

1

Muchas gracias. Acabo de ver que .iconya no se usa.

Ionică Bizău

Answer 8

y no utilice fuentes de la versión personalizada hasta que se resuelva este problema: github.com/twbs/bootstrap/issues/9925

OZ_

Answer 9

27

Una alternativa sería usar Font-Awesome para íconos:

Incluyendo Font-Awesome

Abra Font-Awesome en CDNJS y copie la URL 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 íconos !

Ionică Bizău
fuente

Después de horas de intentar que los íconos funcionaran, vincular al cdn de font-awesome resolvió mi problema. Gracias.

Eenvincible

@Eenvincible No olvide utilizar la última versión . Los enlaces de mi respuesta están un poco desactualizados.

Ionică Bizău

La URL cambió:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

nimrod

Y el archivo de fuente impresionante contiene muchos más iconos. Agradable.

dudewad

No incluir los glifos de bootstrap, sino confiar en fa dará problemas a las bibliotecas que dependen de bootstrap. Por ejemplo, Angular-ui-select perderá algunos íconos

Robin-Hoodie

Answer 10

Después de horas de intentar que los íconos funcionaran, vincular al cdn de font-awesome resolvió mi problema. Gracias.

Eenvincible

Answer 11

@Eenvincible No olvide utilizar la última versión . Los enlaces de mi respuesta están un poco desactualizados.

Ionică Bizău

Answer 12

La URL cambió:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

nimrod

Answer 13

Y el archivo de fuente impresionante contiene muchos más iconos. Agradable.

dudewad

Answer 14

No incluir los glifos de bootstrap, sino confiar en fa dará problemas a las bibliotecas que dependen de bootstrap. Por ejemplo, Angular-ui-select perderá algunos íconos

Robin-Hoodie

Answer 15

3

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

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

Amelia predeterminada tiene glifos en este archivo: http://bootswatch.com/amelia/bootstrap.min.css

Pero el archivo css de Bootstrap CDN no incluye glifos: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

Entonces, como mencionó @edsioufi, debe incluir debe incluir glphicons css, si usa archivos Bootswatch de bootstrap CDN. Archivo: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

trante
fuente

Además, el personalizador en bootstrap genera a veces archivos de fuentes no válidos. Una descarga separada de archivos de fuentes me ayudó a recuperar mis íconos. A veces es un error del paquete bootstrap.

Clain Dsilva

trante: tu información es incorrecta. Si revisa sus enlaces, encontrará que el CDN de Bootstrap para los temas de bootswatch incluye glifos.

Michael Moriarty

Answer 16

Además, el personalizador en bootstrap genera a veces archivos de fuentes no válidos. Una descarga separada de archivos de fuentes me ayudó a recuperar mis íconos. A veces es un error del paquete bootstrap.

Clain Dsilva

Answer 17

trante: tu información es incorrecta. Si revisa sus enlaces, encontrará que el CDN de Bootstrap para los temas de bootswatch incluye glifos.

Michael Moriarty

Answer 18

Si solo desea tener iconos de glyphicons sin ningún css adicional, puede crear un archivo css y poner el código a continuación e incluirlo en el archivo css principal.

Tengo que crear este archivo adicional ya que el enlace de abajo también estaba jugando con los estilos de mi sitio.

//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

En lugar de usarlo directamente, creé un archivo css bootstrap-glyphicons.css

@font-face{font-family:'Glyphicons Halflings';src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
.glyphicon-asterisk:before{content:"\2a";}
.glyphicon-plus:before{content:"\2b";}
.glyphicon-euro:before{content:"\20ac";}
.glyphicon-minus:before{content:"\2212";}
.glyphicon-cloud:before{content:"\2601";}
.glyphicon-envelope:before{content:"\2709";}
.glyphicon-pencil:before{content:"\270f";}
.glyphicon-glass:before{content:"\e001";}
.glyphicon-music:before{content:"\e002";}
.glyphicon-search:before{content:"\e003";}
.glyphicon-heart:before{content:"\e005";}
.glyphicon-star:before{content:"\e006";}
.glyphicon-star-empty:before{content:"\e007";}
.glyphicon-user:before{content:"\e008";}
.glyphicon-film:before{content:"\e009";}
.glyphicon-th-large:before{content:"\e010";}
.glyphicon-th:before{content:"\e011";}
.glyphicon-th-list:before{content:"\e012";}
.glyphicon-ok:before{content:"\e013";}
.glyphicon-remove:before{content:"\e014";}
.glyphicon-zoom-in:before{content:"\e015";}
.glyphicon-zoom-out:before{content:"\e016";}
.glyphicon-off:before{content:"\e017";}
.glyphicon-signal:before{content:"\e018";}
.glyphicon-cog:before{content:"\e019";}
.glyphicon-trash:before{content:"\e020";}
.glyphicon-home:before{content:"\e021";}
.glyphicon-file:before{content:"\e022";}
.glyphicon-time:before{content:"\e023";}
.glyphicon-road:before{content:"\e024";}
.glyphicon-download-alt:before{content:"\e025";}
.glyphicon-download:before{content:"\e026";}
.glyphicon-upload:before{content:"\e027";}
.glyphicon-inbox:before{content:"\e028";}
.glyphicon-play-circle:before{content:"\e029";}
.glyphicon-repeat:before{content:"\e030";}
.glyphicon-refresh:before{content:"\e031";}
.glyphicon-list-alt:before{content:"\e032";}
.glyphicon-flag:before{content:"\e034";}
.glyphicon-headphones:before{content:"\e035";}
.glyphicon-volume-off:before{content:"\e036";}
.glyphicon-volume-down:before{content:"\e037";}
.glyphicon-volume-up:before{content:"\e038";}
.glyphicon-qrcode:before{content:"\e039";}
.glyphicon-barcode:before{content:"\e040";}
.glyphicon-tag:before{content:"\e041";}
.glyphicon-tags:before{content:"\e042";}
.glyphicon-book:before{content:"\e043";}
.glyphicon-print:before{content:"\e045";}
.glyphicon-font:before{content:"\e047";}
.glyphicon-bold:before{content:"\e048";}
.glyphicon-italic:before{content:"\e049";}
.glyphicon-text-height:before{content:"\e050";}
.glyphicon-text-width:before{content:"\e051";}
.glyphicon-align-left:before{content:"\e052";}
.glyphicon-align-center:before{content:"\e053";}
.glyphicon-align-right:before{content:"\e054";}
.glyphicon-align-justify:before{content:"\e055";}
.glyphicon-list:before{content:"\e056";}
.glyphicon-indent-left:before{content:"\e057";}
.glyphicon-indent-right:before{content:"\e058";}
.glyphicon-facetime-video:before{content:"\e059";}
.glyphicon-picture:before{content:"\e060";}
.glyphicon-map-marker:before{content:"\e062";}
.glyphicon-adjust:before{content:"\e063";}
.glyphicon-tint:before{content:"\e064";}
.glyphicon-edit:before{content:"\e065";}
.glyphicon-share:before{content:"\e066";}
.glyphicon-check:before{content:"\e067";}
.glyphicon-move:before{content:"\e068";}
.glyphicon-step-backward:before{content:"\e069";}
.glyphicon-fast-backward:before{content:"\e070";}
.glyphicon-backward:before{content:"\e071";}
.glyphicon-play:before{content:"\e072";}
.glyphicon-pause:before{content:"\e073";}
.glyphicon-stop:before{content:"\e074";}
.glyphicon-forward:before{content:"\e075";}
.glyphicon-fast-forward:before{content:"\e076";}
.glyphicon-step-forward:before{content:"\e077";}
.glyphicon-eject:before{content:"\e078";}
.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}
.glyphicon-plus-sign:before{content:"\e081";}
.glyphicon-minus-sign:before{content:"\e082";}
.glyphicon-remove-sign:before{content:"\e083";}
.glyphicon-ok-sign:before{content:"\e084";}
.glyphicon-question-sign:before{content:"\e085";}
.glyphicon-info-sign:before{content:"\e086";}
.glyphicon-screenshot:before{content:"\e087";}
.glyphicon-remove-circle:before{content:"\e088";}
.glyphicon-ok-circle:before{content:"\e089";}
.glyphicon-ban-circle:before{content:"\e090";}
.glyphicon-arrow-left:before{content:"\e091";}
.glyphicon-arrow-right:before{content:"\e092";}
.glyphicon-arrow-up:before{content:"\e093";}
.glyphicon-arrow-down:before{content:"\e094";}
.glyphicon-share-alt:before{content:"\e095";}
.glyphicon-resize-full:before{content:"\e096";}
.glyphicon-resize-small:before{content:"\e097";}
.glyphicon-exclamation-sign:before{content:"\e101";}
.glyphicon-gift:before{content:"\e102";}
.glyphicon-leaf:before{content:"\e103";}
.glyphicon-eye-open:before{content:"\e105";}
.glyphicon-eye-close:before{content:"\e106";}
.glyphicon-warning-sign:before{content:"\e107";}
.glyphicon-plane:before{content:"\e108";}
.glyphicon-random:before{content:"\e110";}
.glyphicon-comment:before{content:"\e111";}
.glyphicon-magnet:before{content:"\e112";}
.glyphicon-chevron-up:before{content:"\e113";}
.glyphicon-chevron-down:before{content:"\e114";}
.glyphicon-retweet:before{content:"\e115";}
.glyphicon-shopping-cart:before{content:"\e116";}
.glyphicon-folder-close:before{content:"\e117";}
.glyphicon-folder-open:before{content:"\e118";}
.glyphicon-resize-vertical:before{content:"\e119";}
.glyphicon-resize-horizontal:before{content:"\e120";}
.glyphicon-hdd:before{content:"\e121";}
.glyphicon-bullhorn:before{content:"\e122";}
.glyphicon-certificate:before{content:"\e124";}
.glyphicon-thumbs-up:before{content:"\e125";}
.glyphicon-thumbs-down:before{content:"\e126";}
.glyphicon-hand-right:before{content:"\e127";}
.glyphicon-hand-left:before{content:"\e128";}
.glyphicon-hand-up:before{content:"\e129";}
.glyphicon-hand-down:before{content:"\e130";}
.glyphicon-circle-arrow-right:before{content:"\e131";}
.glyphicon-circle-arrow-left:before{content:"\e132";}
.glyphicon-circle-arrow-up:before{content:"\e133";}
.glyphicon-circle-arrow-down:before{content:"\e134";}
.glyphicon-globe:before{content:"\e135";}
.glyphicon-tasks:before{content:"\e137";}
.glyphicon-filter:before{content:"\e138";}
.glyphicon-fullscreen:before{content:"\e140";}
.glyphicon-dashboard:before{content:"\e141";}
.glyphicon-heart-empty:before{content:"\e143";}
.glyphicon-link:before{content:"\e144";}
.glyphicon-phone:before{content:"\e145";}
.glyphicon-usd:before{content:"\e148";}
.glyphicon-gbp:before{content:"\e149";}
.glyphicon-sort:before{content:"\e150";}
.glyphicon-sort-by-alphabet:before{content:"\e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"\e152";}
.glyphicon-sort-by-order:before{content:"\e153";}
.glyphicon-sort-by-order-alt:before{content:"\e154";}
.glyphicon-sort-by-attributes:before{content:"\e155";}
.glyphicon-sort-by-attributes-alt:before{content:"\e156";}
.glyphicon-unchecked:before{content:"\e157";}
.glyphicon-expand:before{content:"\e158";}
.glyphicon-collapse-down:before{content:"\e159";}
.glyphicon-collapse-up:before{content:"\e160";}
.glyphicon-log-in:before{content:"\e161";}
.glyphicon-flash:before{content:"\e162";}
.glyphicon-log-out:before{content:"\e163";}
.glyphicon-new-window:before{content:"\e164";}
.glyphicon-record:before{content:"\e165";}
.glyphicon-save:before{content:"\e166";}
.glyphicon-open:before{content:"\e167";}
.glyphicon-saved:before{content:"\e168";}
.glyphicon-import:before{content:"\e169";}
.glyphicon-export:before{content:"\e170";}
.glyphicon-send:before{content:"\e171";}
.glyphicon-floppy-disk:before{content:"\e172";}
.glyphicon-floppy-saved:before{content:"\e173";}
.glyphicon-floppy-remove:before{content:"\e174";}
.glyphicon-floppy-save:before{content:"\e175";}
.glyphicon-floppy-open:before{content:"\e176";}
.glyphicon-credit-card:before{content:"\e177";}
.glyphicon-transfer:before{content:"\e178";}
.glyphicon-cutlery:before{content:"\e179";}
.glyphicon-header:before{content:"\e180";}
.glyphicon-compressed:before{content:"\e181";}
.glyphicon-earphone:before{content:"\e182";}
.glyphicon-phone-alt:before{content:"\e183";}
.glyphicon-tower:before{content:"\e184";}
.glyphicon-stats:before{content:"\e185";}
.glyphicon-sd-video:before{content:"\e186";}
.glyphicon-hd-video:before{content:"\e187";}
.glyphicon-subtitles:before{content:"\e188";}
.glyphicon-sound-stereo:before{content:"\e189";}
.glyphicon-sound-dolby:before{content:"\e190";}
.glyphicon-sound-5-1:before{content:"\e191";}
.glyphicon-sound-6-1:before{content:"\e192";}
.glyphicon-sound-7-1:before{content:"\e193";}
.glyphicon-copyright-mark:before{content:"\e194";}
.glyphicon-registration-mark:before{content:"\e195";}
.glyphicon-cloud-download:before{content:"\e197";}
.glyphicon-cloud-upload:before{content:"\e198";}
.glyphicon-tree-conifer:before{content:"\e199";}
.glyphicon-tree-deciduous:before{content:"\e200";}
.glyphicon-briefcase:before{content:"\1f4bc";}
.glyphicon-calendar:before{content:"\1f4c5";}
.glyphicon-pushpin:before{content:"\1f4cc";}
.glyphicon-paperclip:before{content:"\1f4ce";}
.glyphicon-camera:before{content:"\1f4f7";}
.glyphicon-lock:before{content:"\1f512";}
.glyphicon-bell:before{content:"\1f514";}
.glyphicon-bookmark:before{content:"\1f516";}
.glyphicon-fire:before{content:"\1f525";}
.glyphicon-wrench:before{content:"\1f527";}

Expandir fragmento

E importé el archivo css creado en mi archivo css principal, lo que me permite importar solo los glifos. Espero que esto ayude

@import url("bootstrap-glyphicons.css");

Bootstrap 3 Glyphicons CDN

¡PRESTA ATENCIÓN!

Respuestas:

Incluyendo Font-Awesome

Uso: