2

Como usar glyphicon con bootstrap 4?

Aca dejo un ejemplo de lo bien que funciona con bootstrap3.x pero ahora que migre al 4 dejo de funcionar, porque y como lo soluciono?

<link rel='stylesheet' , href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>


<a href="#" id="#{item.name}" class="glyphicon glyphicon-star" )>
 link
 </a>

y con el 4 no funciona:

<link rel='stylesheet' , href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



<a href="#" id="#{item.name}" class="glyphicon glyphicon-star" )>
 link
 </a>

2
  • glyphicon dejo de estar disponible para Bootstrap 4. Commented el 29 ene. 2019 a las 5:05
  • y ahora que se debe hacer?
    – hubman
    Commented el 29 ene. 2019 a las 5:10

1 respuesta 1

5

Glyphicon dejó de estar disponible para Bootstrap4.

Puede usar tanto Font Awesome como Github Octicons como una alternativa gratuita para Glyphicons.

En la documentación oficial de Bootstrap4 Icons colocan algunas opciones para los Iconos y es donde se nota que no esta disponible glyphicon

Bootstrap4 también cambió de Less a Sass, por lo que puede integrar el Sass (SCSS) de la fuente en su proceso de compilación, para crear un único archivo CSS para sus proyectos.

Dependiendo con el lenguaje con el que estés trabajando podrías compilar los glyphicon en tu proyecto.

Si decides usar Font Awesome en la mayoría de los iconos bastaría cambiar glyphicon glyphicon- por fa fa-. Puede verlo en el fragmento de código.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



<a href="#" id="#{item.name}" class="fa fa-star" )>
 link
 </a>

Parte de la respuesta estuvo orientada por el sitio en ingles https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.