Los iconos de FontAwesome no se muestran. ¿Por qué?

123

Recientemente he estado desarrollando este sitio web y estoy tratando de poner una fuente de iconos increíbles en él, para que sea escalable.

Lo que pasa es que no aparecen.

Mira el HTML:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

o

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

Puse la referencia de la hoja de estilo en el encabezado.

No sé por qué no aparecen.

Aquí está la referencia:

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

Muy bien, aquí está el html completo:

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>
html  css  font-awesome 
— Luis Valdez
fuente
1
Funciona bien para mí: jsfiddle.net/ZF7x4
— Shahar
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1
Prueba con otra versión de font-awesome. Por ejemplo, algunos íconos no aparecían para mí en la versión 4.3.0, pero sí aparecían en 4.7.0.
— Almir Campos
Consulte stackoverflow.com/a/55977898/4874281 . Espero que ayude a alguien
— manian

Respuestas:

105

Bajo su referencia, tiene esto:

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

Específicamente, la href=parte.

Sin embargo, debajo de su html completo es esto:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

¿Ha intentado reemplazarlo src=con href=su html completo para convertirse en esto?

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

Funciona para mi: http://codepen.io/TheNathanG/pen/xbyFg

— NathanG
fuente
10
Nota : algunas veces es posible que vea casillas vacías, luego verifique dos veces que tiene el archivo css y fuentes en la misma carpeta, verifique esto , espero que ayude a alguien.
— Shaijut
104

Para los que buscan íconos de fuentes impresionantes que faltan, he recopilado algunas ideas:

  • Asegúrese de utilizar un enlace correcto a la CDN, como:

    <link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

  • Si su página usa HTTPS, ¿enlaza con el CSS de fuente impresionante usando HTTPS (reemplace http://con https://en el enlace de arriba)?

  • Verifique que no tenga AdBlock Plus o uBlock habilitados. Puede que estén bloqueando algunos de los iconos.

  • Restablece la caché de tu navegador. (En Chrome, haga un clic largo en el botón de recarga y seleccione Restablecer caché duro)

  • Asegúrese de que el <span><i> elemento o que utilice utilice la FontAwesomefamilia de fuentes. Por ejemplo, no debe

    <i class="fa-pencil" title="Edit"></i>

    pero

    <i class="fa fa-pencil" title="Edit"></i>

    No funcionará si tiene algo como lo siguiente en su CSS:

    * {
  font-family: 'Josefin Sans', sans-serif !important;   
}

  • Si está usando IE8, ¿está usando un HTML5 Shim?

  • Si esto no funciona, hay más ideas para la resolución de problemas en Font Awesome Wiki.

— mxro
fuente
3
Agregaré: Verifique que su .htaccess no esté bloqueando las extensiones ttf, svg, eot o woff
— BassMHL
anulaciones de fuente! No muchas respuestas mencionan esta. Lo he comprobado y comprobado y comprobado y finalmente lo he descubierto. También encontré este problema en el pasado y no sabía por qué, pero ahora lo sé.
— adrianmc
1
Perdí agregar el single facomo nombre de clase primero. Gracias. Respuesta perfecta para encontrar el problema paso a paso.
— Kai Noack
Para mí fue algo más establecer la familia de fuentes
— levininja
Para mí, tenía "font-weight: 500" (para que sea coherente con el tema que estaba usando). Tuve que configurarlo en "font-weight: bold"
— bowlerae
24

Al principio no pude hacer que esto funcionara con Font Awesome 5 :

<i class="fa fa-sort-down"></i>

Es por eso que vine aquí, sin estar familiarizado con la fuente impresionante. Entonces, cuando miré más allá, noté que mi problema era simplemente un problema con la versión.

w3schools me ayudó en este caso.

Nuevo en Font Awesome 5 es el fasprefijo, Font Awesome 4 usafa .

La s en fassignifica sólido , y algunos iconos también tienen un modo regular , especificado mediante el prefijo far.

Ya noté los diferentes archivos en la carpeta css de FontAwesome, como:

  • all.min.css
  • brand.min.css
  • fontawesome.min.css
  • regular.min.css
  • solid.min.css

Y ahí fue cuando me di cuenta de mi error. Todo lo que tuve que hacer fue incluir el css apropiado en el html:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

Y luego haga referencia al elemento correcto:

<i class="fas fa-sort-down"></i>

Esta configuración me funciona. Aunque no todos los elementos tienen equivalentes en cada tipo. Esto no funcionará:

<i class="far fa-sort-down"></i>

Como nota al margen, cuando no desee hacer referencia a todos los archivos separados, esto será suficiente:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
— Ruard van Elburg
fuente
Además, la hoja de referencia muestra qué elementos están disponibles para cada tipo de icono.
— Ruard van Elburg
12

El mío no funcionaba porque quería un icono que no se lanzó en la versión FA que estaba usando.

Esto responde por qué algunos iconos se muestran pero otros no.

Bastante obvio, pero creo que algunas personas todavía se enamoran de esto. Como yo.

— Taiguara Andrade
fuente
4
Sí, proporciona una respuesta a la pregunta.
— Bobort
2
O está intentando utilizar una fuente anterior que ya no existe en la versión que está utilizando. Este, por ejemplo, solo se llama times-circle, no times-circle-o, que es el nombre anterior: fontawesome.com/v4.7.0/icon/times-circle-o
— smoore4
1
¡¡Gracias!! Esto ha sido lo que me hizo tirar de mi pelo todo el día
— 24x7
5

Debe utilizar https para maxcdn.bootstrapcdn.com. Solo https en maxcdn admite CORS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
— Chatchawan Wongsiriprasert
fuente
4

Resolví este problema colocando el directorio de fuentes al mismo nivel que mis archivos CSS.

— lolo
fuente
3

Para todo el que se puede ver el documental completo en 2018. Estoy usando la fuente impresionante 4.7.0 y tengo este problema resuelto simplemente tomando el sen fascomo se ve en el código <i class="fa fa-[icon-name]"></i>. Esto fue originalmente <i class="fas fa-[icon-name]"></i>.

Espero que esto ayude.

— Buena suerte, leo
fuente
Además, estoy ejecutando el servidor node.js.
— Goodluck Leo
Nuevo en Font Awesome 5 es el prefijo fas, Font Awesome 4 usa fa. De w3schools
— Ruard van Elburg
2

Simplemente agregando algo más de información a las respuestas anteriores con respecto a la actualización de fontawesome,

Si usa la fuente impresionante 5,

a. simplemente copie y pegue el siguiente HTML,

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Nota: Es mejor incluir todos sus scripts dentro <body> {YOUR_SCRIPT_HERE}</body>y justo antes (YOUR_CLOSING_BODY)

si. Y por ejemplo

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
fuente
¿Qué tal servir el css localmente en lugar de vincularlo al sitio web de fa?
— Ghilteras
este fue mi caso ... no tenía el archivo js, ​​¡ahora funciona!
— Cristian Sepulveda
2

agregar esto funcionó para mí:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

echar un vistazo

tan ejemplo completo es:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>
Expandir fragmento

— edgarmtze
fuente
2

Si define CSS personalizado, debe configurar font-weight: 900;una biblioteca Font Awesome más nueva (de la versión 5). Si no configura este peso de fuente, puede mostrar cuadrados.

— jurev
fuente
2

Notas

Esta respuesta se crea cuando la última versión de fontawesome es v5. * Pero la versión de yarn y npm apunta a v4. * (21.06.2019). En otras palabras, versiones instaladas a través de administradores de paquetes están detrás de la última versión!

Si lo instaló a font-awesometravés del administrador de paquetes ( yarn o npm ), tenga en cuenta qué versión se instaló. Alternativamente, si ya lo instaló hace font-awesomemucho tiempo, verifique qué versión se instaló.

Instalando font-awesome como nueva dependencia:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

Comprobando qué versión de font-awesome ya está instalada:

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

Problema

Después de instalar la font-awesomedependencia, incorpora uno de estos dos archivos fuente font-awesome.csso font-awesome.min.css(basado en node_modules/font-awesome/css/) en el encabezado de su página web, por ejemplo

<head>
  <link type="text/css" rel="stylesheet" href="css/font-awesome.css">
</head>

A continuación, visita https://fontawesome.com/ . Selecciona iconos gratuitos y busca el icono de inicio de sesión (como ejemplo). Usted copia el icono <i class="fas fa-sign-in-alt"></i>, por ejemplo , lo pega en su html y el icono no se muestra o se muestra como un cuadrado o un rectángulo.

Solución

En esencia, las versiones instaladas a través de administradores de paquetes están detrás de la versión que se muestra en el sitio web https://fontawesome.com/ . Como puede ver, instalamos font-awesome v4.7.0pero, el sitio web muestra documentación para font-awesome v5.*. Solución, visite el sitio web que documenta los íconos para v4.7.0 https://fontawesome.com/v4.7.0 , copie el ícono apropiado, por ejemplo, <i class="fa fa-sign-in" aria-hidden="true"></i>e incorpórelo a su html.

— Lukasz Dynowski
fuente
Han lanzado un nuevo paquete aquí que tiene la última versión. También es compatible con less y sass \ o /
— DerpyNerd
2

Para la versión 5:

Si descargó el paquete gratuito de este sitio:

https://fontawesome.com/download

Las fuentes están en los archivos all.css y all.min.css .

Entonces, su referencia se verá así:

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">

El archivo fontawesome.css no incluye la referencia de fuente.

— vive el amor
fuente
1

Si está utilizando el alojamiento de blogger, use esta hoja de estilo de URL css:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
— Nurdin BM.
fuente
1

Pruebe los dos enlaces siguientes en la etiqueta del encabezado.

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

Obteniendo los iconos del siguiente enlace:

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">
— Cereza
fuente
1

Yo suelo:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

y estilo después:

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
— Tran Anh Hien
fuente
1

Supongo que el enlace CDN que había publicado es la razón por la que no se mostraba correctamente, puede usar este a continuación, funciona perfectamente para mí.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Expandir fragmento

— John Kesh Mahugu
fuente
0

Asegúrese de incluir el rel y escriba como en "rel =" stylesheet "type = 'text / css'" en el enlace al archivo css de awesomefont. Sin estos, el archivo no se cargaba correctamente para mí.

— Elliot Robert
fuente
0

Puede agregar esto en el archivo .htaccess en el directorio de fuente impresionante

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
— Waleed Hakim
fuente
0

Lo he probado y está funcionando.

En lugar de esto

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

Úselo con HTTPS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
— Atif Tariq
fuente
-1

Necesita un importador de fuentes. tratar

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
— SIAMWEBSITE
fuente
-2

Conseguí que el mío funcionara editando el archivo principal font-awesome.css. Tiene direcciones URL al src (woff, eot, etc ...) Tuve que cambiarlas a la ruta absoluta, por ejemplo: http://mywebsite.com/font-awesome.woff ¡ Entonces funcionó!

— crystallove18
fuente
2
Prefiero no recomendar esto ya que está editando un archivo externo. Usted (o su equipo) deberán recordar esto cada vez que necesiten actualizar fontawesome.
— J Cordero
-6

Cambia esto:

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

A esto:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

Creo que lo necesita, de lo http:contrario, no sabe qué protocolo usar (y como resultado, usa el incorrecto, file:por ejemplo).

— Shahar
fuente
@ user3870894 En realidad href, estaba pensando en javascript. Pero prueba el nuevo código.
— Shahar
@ user3870894 o_o Publica HTML completo o al menos las partes principales. ¿Qué dice la consola? ¿Intentaste inspeccionar el elemento?
— Shahar
2
@Shahar Al usar //el navegador, elige el protocolo que está usando el sitio solicitante. Cuando su sitio usa https, elige https. Si usa http, usa http para solicitar el archivo de la CDN. Por supuesto, si abre el sitio localmente usando file:///, lo cual no es recomendable, el navegador intentará abrir el cdn con el fileprotocolo.
— Robin van Baalen
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.