Juan, you must have a problem either with the fontawesome file that you are using, be it with browser restrictions, or with the routes or something else.
Anyway on the FA page , they give you an option to install using a javascript file that will load the icons in local.
I tried with that single file and the code worked for me.
This is what the page says:
Download, customize and serve
Obtain a copy of the latest version of Font Awesome and use it together with the source code of your own project while creating locally and serving in production.
1. Grab and move fontawesome-all.js to your project.
The fontawesome-all.js loads all the basic functions, plus all the visual styles you'll need when using Font Awesome. Copy it to the static asset directory of your project (or wherever you prefer to keep front-end assets or things from suppliers). Be sure to remember the reference route.
2. Reference the file fontawesome-all.js
Add a reference to the fontawesome-all.js file within the <head> of each template or page on which you want to use Font Awesome. Pay attention to the route of your project and where you moved the files in the previous step.
3. Place icons in the marking of your UI
With the complete reference, you can now start placing icons in the <body> of your HTML. We recommend using a consistent HTML element, such as <i> . Add two classes to the element: one that indicates which style to use (the prefix style) and the other that calls the specific icon (icon-name).
Take a look at our additional style to learn more ways to design your icons Go further and use power transformations to create layers of masking and overlays.
I have tried downloading the JS indicated above and then I have used the HTML code they show:
<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>
Indeed, the icons are displayed correctly referring only to that javascript file.
As for the syntax of the code, there was no error, the code works just as you have it, here are some tests. The first is the code that you put in comment. And then, there is more evidence. In this case I used this file: 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>
Add the sources in my project.
from the "web-fonts-with-css" directory
which includes css and sources. 