Para añadir iconos en bootstrap 4, incluya la referencia de Font Awesome (ya sea localmente, o use el CDN).
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Nota: Si estás realizando una migración anterior/posterior por la actual, realice una búsqueda y reemplace esto "glyphicon glyphicon-"
y reemplácelo por "fa fa-"
. La mayoría de los nombres de las clase CSS
de los iconos son iguales. Sin embargo, algunos han cambiado, por lo que debes corregirlos manualmente.
O si aún desean utilizar los iconos de Glyphicons. El archivo glyphicons.less de Bootstrap 3 está disponible en GitHub.
Luego se necesitan de las siguientes variables:
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
Ahora tocaría convertir el archivo .less
en un archivo .css
para luego así usarlo directamente. La migración .less
a .css
podemos hacer uso de la siguiente herramienta en línea less2css.org, de gran utiidad. Y así obtendremos el siguiente resultado, guárde el archivo como glyphicons.css
y listo ya lo puede incluir en sus archivos HTML
.
<link href="/Content/glyphicons.css" rel="stylesheet" />
También se necesitan las fuentes Glyphicon que se encuentran en el paquete Bootstrap 3, coloquelas en el/un directorio / fonts /
.
Ahora puedes seguir usando Glyphicons
en Bootstrap 4 como de costumbre.
Ejemplo actual versión Bootstrap 4
.form-control-feedback {
position: absolute;
padding: 10px;
pointer-events: none;
}
.form-control {
padding-left: 30px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-feedback">
<i class="fa fa-user form-control-feedback"></i>
<input type="text" class="form-control" placeholder="Escribe un nombre">
</div>
Más referencia de migración en la siguiente fuente.