Fonts icons not showing properly even if I route them correctly

Here is my problem, I downloaded the fontawesome files into my project folder because the place where I pretend to implement my project has proxy restrictions so most of the websites and CDNs are restircted, the problem I'm experiencing is that I can´t get my Icons displayed properly, I only get theese square symbols whereever I use theese icons on a file stored on a route different from my project root folder. Here you have my html code and some pictures to prove my point.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-    scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../../css/global.css">
  <link rel="stylesheet" href="../../icons/fawe/css/fontawesome-all.min.css">
  <title>Document</title>
</head>

<body>
  <div class="container-fluid">

    <header class="row bg-dark align-items-center">
      <div class="col-auto">
        <a href="#">
          <img src="../../imagenes/pdvsa.svg" width="140px" height="40px">
        </a>
      </div>

      <div class="col-auto">
        <p class="acron-sistema">SAGEPCYS</p>
      </div>

      <div class="col hidden-xs hidden-sm">
        <p class="titulo-sistema">Sistema Automatizado de Gestión a la Plataforma de Control y Seguridad.</p>
      </div>
    </header>

    <section class="row">
      <nav class="col-md-2 d-none d-md-block bg-dark sidebar">
        <div class="sidebar-sticky">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">
                <span class="far fa-file-alt"></span> Cargar Documentos
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <span data-feather="file"></span> Orders
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <span data-feather="shopping-cart"></span> Products
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <span data-feather="users"></span> Customers
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <span data-feather="bar-chart-2"></span> Reports
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <span data-feather="layers"></span> Integrations
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </section>

  </div>
</body>

</html>

The important part of this code is where I link the icon fonts stylesheet

<link rel="stylesheet" href="../../icons/fawe/css/fontawesome-all.min.css">

And here where I call the icon setting the class attribute as documentation indicates.

<a class="nav-link active" href="#">
  <span class="far fa-file-alt"></span> Cargar Documentos
</a>

Here are the images

I hope you guys can help me with this. Thanks in advance.

Edit: Added the content of the webfonts folder

Solution

I managed to display icons correctly, aparently the icons can only be displayed on the root folder and one level below the root, of course depending on where you place your icons on your project... This is the best aproach to a solution that I could find... Hope it helps somebody...