Juan, debes tener un problema sea con el archivo de fontawesome que estás usando, sea con restricciones del navegador, o con las rutas u otra cosa.
De todos modos en la página de FA, ellos dan una opción de instalar mediante un archivo javascript que se encargará de cargar los iconos en local.
He probado con ese solo archivo y el código me ha funcionado.
Esto es lo que dice la página:
Descargar, personalizar y servirse
Obtenga una copia de la última versión de Font Awesome y utilícela junto con el código fuente de su propio proyecto mientras crea localmente y sirve en producción.
1. Agarra y mueve el fontawesome-all.js
a tu proyecto.
El fontawesome-all.js
carga todas las funciones básicas, además de todos los estilos visuales que necesitará cuando use Font Awesome. Cópielo en el directorio de activos estáticos de su proyecto (o donde quiera que prefiera mantener los activos de front-end o las cosas de los proveedores). Asegúrese de recordar la ruta de referencia.
2. Haga referencia al archivo fontawesome-all.js
Agregue una referencia al archivo fontawesome-all.js
dentro del <head>
de cada plantilla o página en la que quiera utilizar Font Awesome. Preste atención a la ruta de su proyecto y hacia dónde movió los archivos en el paso anterior.
3. Coloque iconos en el marcado de su UI
Con la referencia completa, ahora puede comenzar a colocar iconos en el <body>
de su HTML. Recomendamos usar un elemento HTML consistente, como un <i>
. Agregue dos clases al elemento: una que indique qué estilo usar (el estilo-prefijo) y la otra que llama al icono específico (nombre-icono).
Eche un vistazo a nuestro estilo adicional para conocer más formas de diseñar sus iconos. Vaya más allá y use transformaciones de potencia para crear capas de enmascaramiento y superposiciones.
He probado descargando el JS indicado más arriba y luego he usado el código HTML que ellos muestran:
<head>
<!--load everything-->
<script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>
<body>
<!--user icon in two different styles-->
<i class="fas fa-user"></i>
<i class="far fa-user"></i>
<!--brand icon-->
<i class="fab fa-github-square"></i>
</body>
Efectivamente, los iconos se muestran correctamente haciendo referencia solamente a ese archivo javascript.
En cuanto a la sintaxis del código, no había error, el código funciona tal y como lo tienes, he aquí unas pruebas. El primero es el código que pusiste en comentario. Y luego, hay más pruebas. En este caso he usado este archivo: https://use.fontawesome.com/releases/v5.0.6/css/all.css
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"/>
<button class="boton-menu"><i class="fas fa-bars"></i></button>
<div style="font-size:3em; color:Tomato">
<i class="fas fa-camera-retro"></i>
</div>
<i class="fab fa-font-awesome">
<button>Open up <i class="fa fa-angle-right"></i></button>
<div class="fa-3x">
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
</div>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>
<i class="fas fa-bars">
, debería serfa
, pero tú tienesfas
:<i class="fa fa-bars">