html - salen - Iconos de FontAwesome que no se muestran. ¿Por qué?
no se ven los iconos html (17)
Asegúrese de incluir la referencia y escriba como en "rel =" hoja de estilo "escriba = ''texto / css''" en el enlace al archivo css de impresionante fuente. Sin estos, el archivo no se estaba cargando correctamente para mí.
Recientemente he estado desarrollando este sitio web y estoy tratando de poner una fuente con íconos asombrosos, así que es escalable.
La cosa es que no están apareciendo.
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 la cabeza.
No sé por qué no están apareciendo.
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/[email protected]" 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>
<h1>The greatest way to contact those you love</h1>
<h3>In a way you don''t imagine</h3>
<a href="#" class="btncta">Register Now</a>
</section>
</body>
Bajo tu referencia, tienes 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 reemplazar src= con href= en 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 mí: http://codepen.io/TheNathanG/pen/xbyFg
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 necesita el http: contrario, no sabe qué protocolo usar (y usa el file: incorrecto file: por ejemplo, como resultado).
Conseguí que el mío funcionara editando el archivo principal font-awesome.css. Tiene direcciones URL a src (woff, eot, etc ...) Tuve que cambiarlas a la ruta absoluta, por ejemplo: http://mywebsite.com/font-awesome.woff Entonces funcionó!
Debe utilizar https para maxcdn.bootstrapcdn.com. Solo https en maxcdn soporta CORS
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
El mío no funcionaba porque quería un icono que no se lanzó en la versión de FA que estaba usando.
Esto responde por qué algunos iconos se muestran pero otros no.
Bastante obvio, pero supongo que algunas personas todavía caen en esto. Como yo.
Necesita un importador de fuente. tratar
<style>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
Para los buscadores de íconos de fuentes que faltan, he recopilado algunas ideas:
Asegúrese de utilizar un enlace correcto a la CDN, como por ejemplo:
<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, ¿se vincula a la fuente de CSS impresionante usando HTTPS (reemplace
http://conhttps://en el enlace de arriba)?Verifique que no tenga AdBlock Plus o uBlock habilitado. Pueden estar bloqueando algunos de los iconos.
Restablece la caché de tu navegador. (En Chrome, haga un gran clic en el botón de recarga y seleccione Restablecer el caché duro)
Asegúrese de que el elemento
<span>o<i>que usa, use la familia de fuentesFontAwesome. Por ejemplo, no solo debe<i class="fa-pencil" title="Edit"></i>pero
<i class="fa fa-pencil" title="Edit"></i>No funcionará si tienes algo como lo siguiente en tu CSS:
* { font-family: ''Josefin Sans'', sans-serif !important; }Si está utilizando IE8, ¿está utilizando un HTML5 Shim?
Si esto no funciona, hay más ideas de solución de problemas en la fuente impresionante Wiki.
Pruebe los dos enlaces a continuación mantener 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 desde el siguiente enlace:
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">
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>
Resolví este problema al poner el directorio de fuentes al mismo nivel que mis archivos CSS.
Si define CSS personalizado, debe establecer font-weight: 900; para una biblioteca más nueva de Font Awesome (de la versión 5). Al no establecer esta fuente de peso puede mostrar cuadrados.
Si está utilizando el alojamiento de blogger, use esta url hoja de estilo css:
<link href=''https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'' rel=''stylesheet''/>
Simplemente agregando más información a las respuestas anteriores con respecto a la actualización en fontawesome,
Si usas fuente impresionante 5,
a. solo 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 del <body> {YOUR_SCRIPT_HERE}</body> y justo antes (YOUR_CLOSING_BODY)
segundo. Y por ejemplo,
<li><a href="https://.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
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 de
.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);
}
añadiendo esto funcionó para mí:
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
así que el 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>
el enlace CDN que habías publicado, supongo que no se estaba mostrando correctamente, puedes 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">