css - poner - porque no aparecen los iconos de font awesome
Font Awesome no funciona, los iconos se muestran como cuadrados (26)
Así que estoy tratando de crear un prototipo de una página de marketing y estoy usando Bootstrap y el nuevo archivo Font Awesome. El problema es que cuando trato de usar un ícono, todo lo que se representa en la página es un gran cuadrado.
Así es como incluyo los archivos en la cabeza:
<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 de mí tratando de usar un ícono:
<i class="icon-camera-retro"></i>
Pero todo eso se renderiza en un gran cuadrado. ¿Alguien sabe lo que podría estar pasando?
Abra su código fuente de font-awesome.css 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">
Ahora en fontawesome 5 puedes entregar una versión en caché de JS sobre Https.
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
Más información en https://fontawesome.com/get-started/svg-with-js
De acuerdo con la fortawesome.github.com/Font-Awesome/#integration (paso 3), debe modificar el archivo CSS suministrado para señalar la ubicación de la fuente en su sitio.
Debe devolver el encabezado Access-Control-Allow-Origin a * para sus archivos de fuentes
Debes tener 2 clases, la clase fa 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>
Debes tener 2 clases, la clase fas y la clase fa, quizás esto funcione:
// Wrong
<i class="fas fa-search"></i>
// Correct
<i class="fa fa-search"></i>
El uso de caminos absolutos en lugar de relativos lo resolvió para mí. Estaba usando rutas relativas (vea el primer ejemplo a continuación) y eso no funcionó. Lo revisé a través de la consola y encontré que el servidor estaba devolviendo un 404, archivos no encontrados.
La ruta relativa causó un 404:
@font-face {
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}
El camino absoluto lo resolvió en el navegador cruzado:
@font-face {
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}
No recomendaría hacer esto a menos que sea necesario, pero funciona para mí. Por supuesto, debe repetir esto para todos los formatos de fuente en el archivo font-awesome.css.
En caso de que esté trabajando con Maven y Apache Wicket, también verifique lo siguiente para tratar de resolver el problema con Font-Awesome y los íconos que no se están cargando:
Si ha colocado sus archivos, por ejemplo, en la siguiente estructura de archivos
/src
/main
/java
/your
/package
/css
font-awesome.css
/font
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.svgz
fontawesome-webfont.ttf
fontawesome-webfont.woff
Verifique 1) ¿Está utilizando correctamente un Protector de recursos de paquete para permitir cargar los archivos de fuente correctamente?
Ejemplo de su clase que amplía la aplicación web:
@Override
public void init() {
super.init();
get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());
}
Comprobación 2) Después de haberse asegurado de que todas las fuentes se transfieren correctamente al navegador web, verifique qué se ha transferido realmente al navegador web, es decir, ¿cambió la integridad de los archivos de fuentes? Compare los archivos en su directorio de origen y los archivos transferidos al navegador web utilizando, por ejemplo, la barra de herramientas de desarrollo web de Firefox y DiffDog (para la comparación de archivos).
En particular, si usa Maven, tenga en cuenta el filtrado de recursos. No filtres la carpeta donde se encuentran tus archivos / font; de lo contrario, se dañarán.
Ejemplo de tu pom.xml
<build>
<finalName>Your project</finalName>
<resources>
<resource>
<filtering>true</filtering>
<directory>src/main/resources</directory>
</resource>
<resource>
<filtering>false</filtering>
<directory>src/main/java</directory>
<includes>
<include>**</include>
</includes>
<excludes>
<exclude>**/*.java</exclude>
</excludes>
</resource>
</resources>
</build>
En el ejemplo anterior, no filtramos la carpeta src / main / java, donde están contenidos los archivos css y font.
Para obtener más información sobre el filtrado de datos binarios, consulte también la documentación:
http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html
En particular, la documentación advierte: " Advertencia: no filtres archivos con contenido binario como imágenes. Esto probablemente resultará en una salida corrupta. Si tienes tanto archivos de texto como binarios como recursos, debes declarar dos conjuntos de recursos mutuamente excluyentes. El primer conjunto de recursos define los archivos que se deben filtrar y el otro conjunto de recursos define los archivos para copiar sin alterar ... "
Es posible que la ruta de su fuente no sea correcta, por lo que css no puede cargar la fuente y representar los iconos, por lo que debe proporcionar la ruta de las fuentes adjuntas.
@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
Esto debería ser mucho más simple en la nueva versión 3.0. Lo más fácil es apuntar al Bootstrap CDN: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome
Esto puede ayudar, verifique para asegurarse de que no ha cambiado inadvertidamente la familia de fuentes en el ícono. Si ha cambiado la familia de fuentes del elemento .fa desde: FontAwesome, el icono no se mostrará. Siempre es algo tonto y pequeño.
Espero que ayude a alguien.
Estoy usando Font Awesome 4.3.0 solo vinculo desde maxcdn funciona como se menciona here ,
pero para trabajar en mi servidor poner fuentes y css en la misma carpeta funcionó para mí, como este
luego simplemente vincula el css:
<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
la esperanza ayuda a alguien
He cambiado de 3.2.1 a 4.0.1 y la carpeta era de fuente y ahora se llama fuentes.
src: url (''../ font / fontawesome-webfont.eot? v = 3.2.1'');
src: url (''../ fonts / fontawesome-webfont.eot? v = 4.0.1'');
Espero que ayude a alguien
Hoy encontré una solución que era:
- Descargue el proyecto completo de su page Github
- A continuación, siga el resto de los pasos en su page debajo de la sección de CSS predeterminado para mover el directorio a su proyecto y agregar el enlace en la sección HEAD de un archivo .html
El problema con su documentación es que no especifican un enlace a donde debería obtener una copia de todo el proyecto fuente-impresionante para poner en su proyecto.
Lo que solucionó el problema para mí (en mi máquina con Windows 7) fue descifrar mi directorio de proyectos. Es una locura la cantidad de fallas visuales y funcionales que surgen originalmente al probar su sitio web. Simplemente vaya a un símbolo del sistema y ejecute:
attrib -R %PROJECT_PATH%/*.* /S
cipher /a /d /s:%PROJECT_PATH%
... donde% PROJECT_PATH% es la ruta de acceso completa al directorio donde está almacenado su código.
Mi problema fue agregar el
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
dentro de una
<!-- build:css assets/styles/main.css -->
<!-- endbuild -->
etiqueta
Lo arreglé colocándolo fuera de la etiqueta.
No funcionaba para mí porque tenía la directiva Allow from none para el directorio raíz en mi configuración de Apache. Así es como lo hice funcionar ...
Mi estructura de directorio:
root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html
donde mi index.html tiene:
<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">
Opté por seguir prohibiendo el acceso a mi raíz y en su lugar agregué otra entrada de directorio en mi configuración de Apache para root / font-awesome /
<Directory "/path/root/font-awesome/">
Allow from all
</Directory>
Si está utilizando LESS o SASS, abra el archivo font-awesome.less / sass y edite la variable de ruta @fa-font-path: "../font"; que apunta a las fuentes reales:
@fa-font-path: "../font";
@font-face {
font-family: ''FontAwesome'';
src: url(''@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1'');
src: url(''@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1'') format(''embedded-opentype''),
url(''@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1'') format(''woff''),
url(''@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1'') format(''truetype'');
font-weight: normal;
font-style: normal;
}
Lo mismo con CSS, excepto que edite la ruta en el bloque de declaración @ font-face:
@font-face {
font-family: ''FontAwesome'';
src: url(''your/path/fontawesome-webfont.eot?v=3.0.1'');
src: url(''your/path/fontawesome-webfont.eot?#iefix&v=3.0.1'') format(''embedded-opentype''),
url(''your/path/fontawesome-webfont.woff?v=3.0.1'') format(''woff''),
url(''your/path/fontawesome-webfont.ttf?v=3.0.1'') format(''truetype'');
font-weight: normal;
font-style: normal;
}
Si su servidor es IIS, asegúrese de agregar el MIME correcto para servir la extensión de archivo .woff. El MIME correcto es application/octet-stream
Traté de resolver el mismo problema con algunas soluciones anteriores, pero no funcionaron en mi situación. Finalmente, agregué estas 2 líneas en HEAD y funcionó:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
Tuve este problema El problema era que tenía un estilo de CSS de la familia de fuentes con! Importante sobreescribir la fuente fontawesome.
Usa esto <i class="fa fa-camera-retro" ></i> no has definido las clases fa
Uso la fuente oficial Awesome SASS Ruby Gem y corrigí el error agregando la siguiente línea a mi application.css.scss
@import "font-awesome-sprockets";
Explicación:
El archivo font-awesome-sprockets incluye los sprockets Assest helper funciones de Sass utilizadas para encontrar la ruta correcta al archivo de fuente.
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 que comencé a cargarlo desde maxcdn
Verifique dos veces el archivo fontawesome-all.css - en la parte inferior habrá una ruta a la carpeta webfonts. El mío tenía el formato "../webfonts", lo que significaba que el archivo css estaría mirando un nivel más arriba de donde está. Como todos mis archivos css estaban en la carpeta css y agregué las fuentes a la misma carpeta, esto no funcionaba.
Simplemente mueva su carpeta de fuentes a un nivel y todo debería estar bien :)
Probado con Font Awesome 5.0
si estás usando sass y has importado en tu main.scss @import ''../vendor/font-awesome/scss/font-awesome.scss'';
El error puede provenir del archivo font-awesome.scss que está buscando los archivos de fuente en su ruta relativa.
Así que recuerde anular la variable $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;
así no hay necesidad de agregar el cdn en su index.html