html - para - Font Awesome no muestra el ícono
insertar iconos en html (21)
Estoy usando Font Awesome y no deseo agregar CSS con HTTP. Descargué Font Awesome y lo incluí en mi código, pero Font Awesome muestra un cuadro cuadrado con borde en lugar de un icono. Aquí está mi código:
<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>
Me gustaría saber cómo hacer que se muestre el ícono en lugar del cuadro cuadrado con borde.
¡Cuidado con Bootstrap! Bootstrap anulará las clases .fa. Si trae ambos paquetes por separado pensando "Usaré Bootstrap para el manejo de bloques receptivo y Font-Awesome para íconos", debe abordar las clases .fa dentro de Bootstrap para que no interfieran con el soporte de Font-Awesome. implementación sola.
por ejemplo: font-family ''FontAwesome'' en Bootstrap interferirá con font-family ''Font Awesome 5 Free'' en Font-Awesome y obtendrá un cuadro blanco en lugar del icono que desea.
Puede haber formas más claras de manejar esto, pero si ha bajado la lista de verificación tratando de solucionar el problema del "recuadro blanco" y todavía no puede resolverlo (como lo hice), esta puede ser la respuesta que está buscando para.
Abra su código font-awesome.css hay como:
@font-face {
font-family: ''FontAwesome'';
src: url(''../fonts/fontawesome-webfont.eot?v=4.5.0'');
src: url(''../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0'') format(''embedded-opentype''), url(''../fonts/fontawesome-webfont.woff2?v=4.5.0'') format(''woff2''), url(''../fonts/fontawesome-webfont.woff?v=4.5.0'') format(''woff''), url(''../fonts/fontawesome-webfont.ttf?v=4.5.0'') format(''truetype''), url(''../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular'') format(''svg'');
font-weight: normal;
font-style: normal;
}
debes tener una carpeta como:
font awesome -> css
-> fonts
o la forma más fácil:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Basado en la versión 5.10.1.
Mi solución (localmente):
-
Si está usando "fontawesome.css" o "fontawesome.min.css", intente usar "all.css" en su lugar (ubicado en la carpeta css).
-
La carpeta "css" y la carpeta "webfonts" del paquete fontawesome que descargó deben estar en el mismo nivel entre sí.
En mi caso, ya tenía una carpeta css, así que simplemente cambié el nombre de la carpeta css fontawesome a "css-fa".
Con "css-fa" y "webfonts" en mi carpeta css, simplemente conéctelo correctamente en su editor de texto y debería funcionar.
Por ejemplo: link rel = "stylesheet" href = "css / css-fa / all.css"
Cuando abre
font-awesome.min.css
puede ver la siguiente ruta:
''Fonts/fontawesome-webfont.ttf?v=4.2.0'' ...
Significa que debe crear
Fonts
directorio y luego copiar los archivos
fontawesome-webfont.ttf
(
fontawesome-webfont.woff
,
fontawesome-webfont.eot
) a esta carpeta.
Después de eso, todo debería funcionar bien.
En
font-awesome-4.x
agregue la carpeta de
fonts
carpetas de su aplicación web.
En MacOS Mojave, tuve este problema en Safari. Las imágenes de fuente impresionante funcionaron en Chrome pero no en Safari, así que estaba seguro de que no era el sitio.
Los hice renderizar yendo a Preferencias en el menú Safari, y deshabilitando / desmarcando "Prevenir el rastreo entre sitios" en la pestaña Privacidad.
No estoy seguro de por qué esto lo solucionó, pero lo hizo.
En mi caso, cometí el siguiente error en mi código CSS.
*{
font-family: ''Open Sans'', sans-serif !important;
}
Esto anulará todas las reglas de la familia de fuentes para toda la página. Mi solución fue mover el código al cuerpo así.
body{
font-family: ''Open Sans'', sans-serif;
}
NB: Siempre que use la bandera
!important
en css, cualquier otra regla css declarada del mismo tipo en el mismo elemento se anulará.
En mi caso: debe copiar toda la carpeta font-awesome en la carpeta css de su proyecto y no solo el archivo font-awesome.min.css .
Entonces parece agregar
style=''font-weight:normal;''
o cambiar la fuente directamente en el elemento anula la
.fas{font-weight:900}
en el archivo CSS de Font Awesome.
Supongo que la fuente tiene definiciones específicas dentro del archivo de fuente con el que funciona.
Parece que el
font-weight
la
font-weight
debe establecerse entre 501 y 1000, o la fuente puede parecer un bloque cuadrado.
Es posible que haya utilizado un VCS (git o somesuch) para transferir archivos de iconos al servidor. git dice:
warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.
Probablemente tengas que arreglar tus fuentes.
Estaba lidiando con el mismo problema y luego me di cuenta de que tenía que usar una nueva versión (5 y más)
use este cdn, funcionará.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
Instalé con éxito Font Awesome usando su CDN y javascript include (como se describe en esta página ). Luego intenté copiar el HTML y CSS en algunas páginas heredadas y de repente vi cuadros cuadrados vacíos en lugar de los iconos.
Vi la respuesta de Daniel (arriba) y porque mi archivo CSS heredado era enorme (y años) sospeché que ese era el problema. Sin embargo, cuando miré en Chrome DevTools, realmente parecía que Font Awesome estaba cargado:
Esperaba ver la fuente tachada si había un problema ... Sin embargo, realmente había agotado todas mis opciones, así que verifiqué los Estilos computados y vi claramente que la fuente Font Awesome definitivamente no se estaba utilizando. (Ver la fuente renderizada en la parte inferior)
Mi archivo CSS heredado era un desastre y preferí no tocarlo, así que hice trampa haciendo esto, por favor no se lo digas a nadie :)
<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>
También para tener en cuenta, cuando actualicé de Font Awesome versión 4.7.0 a la versión 5.4.1, ¡este problema desapareció! Usé esta guía de configuración y este HTML
<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>
Para aquellos de ustedes que usan SCSS y el paquete NPM, aquí está mi solución:
npm i --save @fortawesome/fontawesome-free
Luego, en la parte superior de un archivo SCSS (idealmente un archivo SCSS importado en la raíz de su aplicación):
@import ''@fortawesome/fontawesome-free/css/fontawesome.css'';
@import ''@fortawesome/fontawesome-free/css/all.css'';
Para empezar, no deberías tener
font-awesome.css
y
font-awesome.min.css
En general, use
font-awesome.css
durante el desarrollo, luego cambie a
font-awesome.min.css
una vez que esté satisfecho con el sitio.
Problemas como este a menudo son causados por rutas y ubicaciones relativas, así que verifique dónde está su archivo html en relación con el css.
Si su archivo html está en el directorio base y el css está en una subcarpeta fuera de la raíz, necesitaría:
href="./css/font-awesome.css"
(punto único)
Primero, verifique que tenga class = "fa", así como cualquier clase de ícono. Entonces, no solo
<i class="fa-pencil" title="Edit"></i>
Pero también
<i class="fa fa-pencil" title="Edit"></i>
Entonces funciona como se esperaba. Esto resolvió mi problema.
Tenga en cuenta que la nueva versión (5) de font awesome usa
"fas"
o
"fab"
lugar del prefijo
"fa"
.
Citado de su sitio web:
El prefijo fa ha quedado en desuso en la versión 5. El nuevo valor predeterminado es el estilo sólido sólido y el estilo fabuloso para las marcas.
Es por eso que mis fuentes mostraban cuadrados en blanco. Ahora arreglado.
Código de ejemplo:
<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>
Todo lo anterior es correcto, sin embargo, además, mi problema fue que descargué la versión gratuita de FA5 que no tiene:
font-family:''FontAwesome'';src:url(''../fonts/fontawesome-webfont.eot?v=4.7.0'')
No pude hacer que v5 funcionara, así que volví a 4.7.0 con la ayuda de las publicaciones anteriores y solucionó mi problema.
Verifique que la ruta a su archivo
CSS
sea correcta.
En lugar de preferir los enlaces absolutos, son más fáciles de entender ya que sabemos desde dónde comenzamos y los motores de búsqueda también los preferirán a los enlaces relativos.
Y para reducir el ancho de banda, en lugar de usar el enlace de los servidores de fuente impresionante:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">
Además, si lo usa,
no será necesario cargar fuentes adicionales a su servidor
y estará seguro de que señala el archivo
CSS
correcto, y también se beneficiará de las últimas actualizaciones al instante.
resuelto cambiando el selector de familia de fuentes importante! de
* { ... }
a
*:not(i) { ... }
(con preprocesador scss); espero que hayas resuelto
You needed to close your `<link />`
As you can see in your <head></head> tag. This will solve your problem
<head>
<link rel="stylesheet" href="../css/font-awesome.css" />
<link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>