Los íconos de Font Awesome no funcionan, he incluido todos los archivos requeridos [closed]

9 minutos de lectura

avatar de usuario
luis valdez

Estoy tratando de usar los íconos de Font Awesome de la versión 4.1.0 en mi sitio web pero no funcionan, los he mencionado en el head de mi pagina

He intentado usar dos métodos.

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

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

Aquí está el enlace CDN que estoy usando:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

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>

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

  • Funciona bien para mí: jsfiddle.net/ZF7x4

    – Shahar

    23 de julio de 2014 a las 23:44

  • relacionado stackoverflow.com/questions/14366158/…

    – Ciro Santilli Путлер Капут 六四事

    2 de junio de 2016 a las 13:39

  • Pruebe con otra versión de font-awesome. Por ejemplo, algunos iconos no me aparecían en la versión 4.3.0 pero sí en la 4.7.0.

    –Almir Campos

    28 de mayo de 2017 a las 12:02

  • Pude hacer que Font Awesome funcionara usando el archivo all.min.css.

    -Rob Breidecker

    29 de noviembre de 2018 a las 16:20

avatar de usuario
mxro

Para los buscadores de íconos impresionantes de fuentes 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 al CSS impresionante de fuente usando HTTPS (reemplace http:// con https:// en el enlace de arriba).

  • Vuelva a verificar que no tenga habilitado AdBlock Plus o uBlock. Es posible que estén bloqueando algunos de los íconos.

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

  • Asegúrese de que el <span> o <i> elemento que utiliza, utiliza el FontAwesome Familia tipográfica. Por ejemplo, no solo 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á utilizando IE8, ¿está utilizando un HTML5 Shim?

  • Si esto no funciona, hay más Ideas para solucionar problemas en la Font Awesome Wiki.

  • Agregaré: verifique que su .htaccess no esté bloqueando las extensiones ttf, svg, eot o woff

    – Bajo MHL

    7 dic 2015 a las 14:46

  • anulaciones de fuente! No muchas respuestas mencionan esta. He comprobado y comprobado y comprobado y finalmente lo descubrí. También me encontré con este problema en el pasado y no sabía por qué, pero ahora lo sé.

    – adrianmc

    17 de febrero de 2016 a las 3:17

  • me faltó agregar el single fa como nombre de clase primero. Gracias. Respuesta perfecta para encontrar el problema paso a paso.

    – avatar

    20 de julio de 2016 a las 7:52

  • Para mí fue otra cosa establecer la familia de fuentes

    – levininja

    30 abr 2018 a las 20:05

  • Si está utilizando next.js, debe seguir estos pasos para que el CSS se configure correctamente: fontawesome.com/docs/web/use-with/react/use-with#next-js

    – jlhasson

    7 ago a las 18:31

Bajo su referencia, tiene esto:

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

Específicamente, el href= parte.

Sin embargo, debajo de su html completo está esto:

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

¿Has probado a 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 mi: http://codepen.io/TheNathanG/pen/xbyFg

  • Nota: algunas veces es posible que vea cuadros vacíos, luego verifique que tenga css y archivos de fuentes en la misma carpeta, verifique esto, espero que ayude a alguien.

    – Shaiju T.

    7 mayo 2015 a las 10:20


  • Otro problema es que fontawesome css no puede encontrar los archivos de fuentes que se requieren. Asegúrese de que estén en una carpeta llamada webfonts en la raíz del proyecto. Busque en la consola del navegador cualquier mensaje sobre una fuente que no se encuentra, y mire para ver de dónde está tratando de descargarla y asegúrese de que sus fuentes estén en esa ubicación.

    – Greg Chicle

    10 de mayo a las 20:07

Al principio no pude hacer que esto funcionara con fuente impresionante 5:

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

Es por eso que vine aquí, ya que no estoy familiarizado con la fuente impresionante. Entonces, cuando busqué más, noté que mi problema era simplemente un problema con la versión.

w3escuelas me ayudó en este caso.

Nuevo en Font Awesome 5 es el fas prefijo, usos de Font Awesome 4 fa.

El pecado fas representa sólidoy algunos íconos también tienen un
regular modo, especificado mediante el uso del prefijo far.

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

  • todo.min.css
  • marcas.min.css
  • fontawesome.min.css
  • regular.min.css
  • sólido.min.css

Y fue entonces cuando me di cuenta de mi error. Todo lo que tenía que hacer era incluir el css apropiado en el html:

<link rel="stylesheet" href="https://stackoverflow.com/questions/24922833/~/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 artículo correcto:

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

Esta configuración funciona para mí. Aunque no todos los artículos 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="https://stackoverflow.com/questions/24922833/~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">

  • además, el hoja de trucos muestra qué elementos están disponibles para cada tipo de icono.

    usuario4864425

    12 de septiembre de 2019 a las 7:12

  • Tuve que incluir font-awesome.min.css fwiw. Sin embargo, esta publicación me ayudó.

    – L0uis

    24 sep 2020 a las 21:42

  • fontawesome.com/v6/icons/magnifying-glass-dollar?s=solid no usa fas

    – mplungjan

    19 de mayo a las 8:16

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

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

Bastante obvio, pero supongo que algunas personas todavía caen en esto. Como yo.

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

Si usa fuente impresionante 5,

una. 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 del <body> {YOUR_SCRIPT_HERE}</body> y justo antes de (YOUR_CLOSING_BODY)

b. Y por ejemplo,

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>

  • ¿Qué tal servir el css localmente en lugar de vincularlo al sitio web fa?

    – Gilteras

    5 de marzo de 2019 a las 4:19

  • este fue mi caso … no tenía el archivo js, ​​¡ahora funciona!

    – Cristian Sepúlveda

    16 de agosto de 2019 a las 17:31

avatar de usuario
Rahul.S

Tengo un problema similar, muestra íconos en cuadrados, probé según las instrucciones especificadas aquí: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Resuelto usando esta referencia en la sección principal de la página html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

  • ¿Qué tal servir el css localmente en lugar de vincularlo al sitio web fa?

    – Gilteras

    5 de marzo de 2019 a las 4:19

  • este fue mi caso … no tenía el archivo js, ​​¡ahora funciona!

    – Cristian Sepúlveda

    16 de agosto de 2019 a las 17:31

avatar de usuario
Chatchawan Wongsiriprasert

Debe usar 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" />

¿Ha sido útil esta solución?