Font awesome n'affiche pas le bon icon par DavidBouhaben - page 1

Bonjour les amis.

Je n'arrive pas à afficher le bon icon de font-awsome. Comme on peut voir sur mes codes HTML dans la ligne 57 à 59, je veux montrer l'icon thumbs up et adjust (pour darkmode) mais sur mon site, il affiche 3 icons qui n'ont rien a voir comme vous pouvez voir sur mon screenshot. Je n'arrive pas à comprendre car même en installant plusieurs fois le font-awesome, le problème persiste
Avez vous une idée pourquoi ?

Voici mon github: https://github.com/Darkheadbanger/DavidBouhaben_personal_project_CV_ePortofolio

Pour installation de font-awesome c'est très simple car je suis ce qui est marqué sur leur site. Je télécharge font-awesome web, je copie le dossier scss et webfonts qui se trouve dans le dossier font-awesome, je les colle dans le dossier "Vendors" et je l'importe dans main.scss, main.scss est l'endroit ou j'importe toutes mes scss.

Voici mon HTML:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,900i"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/public/css/style.css" />
    <title>David Bouhaben ePortfolio</title>
  </head>
  <body>
    <div id="navId" class="">
    <nav id="nav" class="nav">
      <ul>
        <li><a href="/about.html" class="nav__link nav__link--active">Accueil</a></li>
        <li><a href="#profil" class="nav__link">Profil</a></li>
        <li><a href="#portfolio" class="nav__link">Portfolio</a></li>
        <li><a href="#CV" class="nav__link">CV</a></li>
        <li><a href="#Contact" class="nav__link">Contact</a></li>
        <li><a href="#Activité" class="nav__link">Activité Récente</a></li>
        <!-- Langue, Anglais, Francais, Indonésien -->
        <li><a href="#langue" class="nav__link"><img src="./public/image/Drapeau/France.png" alt="France">  Français</a></li>
        <!-- <div class="langue">
          <span>France</span>
          <span>Anglais</span>
          <span>Indonésie</span>
        </div> 
      a faire avec JS-->
        <!-- ----------------------------------------------------- -->
        <li><a href="#Darkmode" class="nav__link"><i class="fas fa-user"></i>Mode sombre</a></li>
      </ul>
    </nav>
  </div>
    <div class="loading--circle loading--full-hight">
      <div class="loading--box loading--full-hight"></div>
    </div>
    <div class="wrapper" >
      <div class="wrapper-logo">
        <header class="header">
          <div id="home" class="wellcome logo-container">
            <h1 class="header__logo"><a href="/index.html"><img src="./public/image/Logo-david-bouhaben.png" alt="Logo David Bouhaben"></a></h1>
            <div class="container-hamburger">
            <button class="hamburger-toggle">
              <span class="bar-top"></span>
              <span class="bar-mid"></span>
              <span class="bar-bot"></span>
            </button>
            </div>
          </div>
        </header>
        </div>
      </div>

      <i class="fas fa-thumbs-up"></i> 
      <i class="fas fa-adjust"></i>
      <i class="fa-solid fa-thumbs-up"></i>    <!-- <section class="quote"> -->
    </div>
    <script defer src="./public/JS/loading.js"></script>
    <script defer src="./public/JS/hamburger.js"></script>
    <script defer src="./public/JS/nav.js"></script>
    <script defer src="/your-path-to-fontawesome/js/brands.js"></script>
    <script defer src="/your-path-to-fontawesome/js/solid.js"></script>
    <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>
  </body>
</html>

Voici mon main.scss ou je regroupe toutes mes @imports scss

@import "./utils/breakpoints";
@import "./utils/variables";
@import "./utils/functions";
@import "./utils/mixins";
@import "./utils/extensions";
@import "./utils/keyframes";

@import "./vendors/scss/fontawesome.scss";
@import "./vendors/scss/solid.scss";
@import "./vendors/scss/regular.scss";
@import "./vendors/scss/brands.scss";

@import "./base/base";
@import "./base/typography";

@import "./components/hamburgerBtn";
@import "./components/loading";

@import "./layout/header";
@import "./layout/nav";
@import "./layout/container";
@import "./layout/form";

@import "./pages/work";
@import "./pages/about";
@import "./pages/project";

Voici comment j'ai organisé mes fichiers avec le système 7-1 pour une codebase plus simple à gérer. Comme on peut voir, les scss du font-awesome je range dans un dossier appelée "SCSS" et un dossier webfonts

Et voici ce que le navigateurs affichent (ils affichent le mauvais icons), et une autre screen de ce que dois afficher e navigateurs normalement

Merci pour ceux qui m'aides

DavidBouhaben

16 décembre 2021 à 20:00:34

Lamecarlate

16 décembre 2021 à 22:45:11

Bonjour,

je vois qu'il y a une erreur dans la console : quelle est-elle ? Ça semble parler de police, ça pourrait être lié. Vérifie dans l'onglet Réseau aussi, si tu n'as pas de 404.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Font awesome n'affiche pas le bon icon

Supprimer

Modérer

Signaler le message aux modérateurs