Font Awesome no funciona, los iconos se muestran como cuadrados
Así que estoy intentando crear un prototipo de una página de marketing y estoy usando Bootstrap y el nuevo archivo Font Awesome. El problema es que cuando intento usar un ícono, todo lo que aparece en la página es un gran cuadrado.
Así es como incluyo los archivos en el encabezado:
<head>
<title>Page Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/app.css">
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
</head>
Y aquí hay un ejemplo mío intentando usar un ícono:
<i class="icon-camera-retro"></i>
Pero todo eso se representa en un gran cuadrado. ¿Alguien sabe qué podría estar pasando?
Debes tener 2 clases, la faclase y la clase que identifica el icono deseado fa-twitter, fa-search, etc…
<!-- Wrong -->
<i class="fa-search"></i>
<!-- Correct -->
<i class="fa fa-search"></i>
Actualización de Bootstrap 5
Nota: "El prefijo fa ha quedado obsoleto en la versión 5. El nuevo valor predeterminado es el
fasestilo sólido y elfabestilo para marcas". – Terje Solem
Según la documentación (paso 3), debe modificar el archivo CSS proporcionado para que apunte a la ubicación de la fuente en su sitio.
Utilizar esta
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Tuve un problema similar con Amazon Cloudfront CDN pero se resolvió después de comenzar a cargarlo desde maxcdn
Verifique para asegurarse de no haber cambiado inadvertidamente la familia de fuentes en el ícono. Si ha cambiado la familia de fuentes del elemento .fa de: FontAwesome, el icono no se mostrará. Siempre es algo tonto y pequeño.
