How to replace the awesome font icon with Javascript

Asked

Viewed 53 times

1

Why the icon menu class does not change from fa-caret-right for fa-caret-down when I move the mouse over my button?

HTML:

<!DOCTYPE html>

<html lang="pt-br">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Template Model</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Ballet&family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
  </head>
  <body>
    <div class="container">
      <header class="header">
        <nav class="nav">
          <a class="logo" href="">LOGO</a>
          <div class="burger">
            <i class="fas fa-bars"></i>
          </div>
          <div class="menu">
            <a class="menu__item" href="">Produtos</a>
            <a class="menu__item" href="">Clientes</a>
            <a class="menu__item" href="">Pedidos</a>
            <a class="menu__item" href="">Investimentos</a>
            <div class="dropdown">
              <div class="dropdown__btn">
                <span>Relatórios</span>
                <i class="fas fa-caret-right"></i>
              </div>
              <div class="dropdown__content">
                <a class="dropdown__item" href="">Clientes</a>
                <a class="dropdown__item" href="">Pedidos</a>
                <a class="dropdown__item" href="">Investimentos</a>
              </div>
            </div>
            <a class="menu__item" href="">Sair</a>
          </div>
        </nav>
      </header>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js" integrity="sha512-UwcC/iaz5ziHX7V6LjSKaXgCuRRqbTp1QHpbOJ4l1nw2/boCfZ2KlFIqBUA/uRVF0onbREnY9do8rM/uT/ilqw==" crossorigin="anonymous"></script>
    <script src="{% static 'js/script.js' %}"></script>
  </body>
</html>

CSS:

/* VARIABLES */
:root {
    --base-1: #f4f4f4;
    --color-1: #633517;
}

/* RESET */
* {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

ul,
li {
    list-style: none;
}

img {
    display: block;
    width: 100%;
}

html {
    background: var(--base-1);
}

/* STYLE */

.container {
    width: 1140px;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .container {
        width: 960px;
    }
}

@media (max-width: 992px) {
    .container {
        width: 720px;
    }
}

@media (max-width: 786px) {
    .container {
        width: 540px;
    }
}

@media (max-width: 576px) {
    .container {
        width: 100%;
    }
}


.header {
    border-bottom: 2px solid var(--color-1);
}

.nav {
    width: 100%;
    display: flex;
    align-items: center;
}

.logo {
    font-family: 'Ballet', cursive;
    font-size: 24px;
    color: var(--color-1);
    flex-basis: 250px;
    letter-spacing: 5px;
}

.logo:hover {
    transform: scale(1.1);
}

.burger {
    color:var(--color-1);
    transform: scale(2);
    display: none;
}

.burger:hover {
    transform: scale(2.1);
}

.menu {
    width: 100%;
    display: flex;
    align-items: center;
}

.menu__item {
    font-size: 18px;
    color: var(--color-1);
}

.menu__item:hover {
    transform: scale(1.1);
}

.menu > .menu__item {
    margin-left: 20px;
}

.menu > .menu__item:last-child {
    margin-left: auto;
    font-size: 12px;
    display: none;
}

.dropdown {
    margin-left: 20px;
    position: relative;
    cursor: pointer;
}

.dropdown__btn {
    display: flex;
    align-items: center;
    color: var(--color-1);
}

.dropdown__btn > span {
    font-size: 18px;
    padding-right: 5px;
}

.dropdown__btn:hover {
    transform: scale(1.1);
}

.dropdown__content {
    position: absolute;
    box-shadow: 0 0 3px var(--color-1);
    border-radius: 5px;
    overflow: hidden;
    background: var(--base-1);
    margin-left: -30px;
    display: none;
}


.dropdown__item {
    display: inline-block;
    font-size: 18px;
    color: var(--color-1);
    padding: 10px 20px;
    text-align: center;
    width: 100%;
}

.dropdown__item:hover {
    color: var(--base-1);
    background: var(--color-1);
}

.dropdown:hover > .dropdown__content {
    display: block;
}

JS:

const dropdown = document.querySelector('.dropdown')
const dropdown__btn_I = document.querySelector('.dropdown__btn i');

dropdown.addEventListener('mouseover', () => {
    dropdown__btn_I.classList.toggle('fa-caret-right');
    dropdown__btn_I.classList.toggle('fa-caret-down');
    console.log(dropdown__btn_I);
});

dropdown.addEventListener('mouseout', () => {
    dropdown__btn_I.classList.toggle('fa-caret-right');
    dropdown__btn_I.classList.toggle('fa-caret-down');
    console.log(dropdown__btn_I);
});

Imagery:

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

javascript html css

  • The code Voce reported seems to be working normally. See here.

  • Here does not work. Type visually does not happen anything, but giving a console.log on the dropdown_btn_I selector it is changed. I’ll put another image with the output too.

  • Put more codes. The problem may be in another place...

  • Ready! That’s all from header

  • Obs: I’m using Django.

1 answer

0


For some reason, this problem is being caused by the Font Awesome. He’s commenting on the line where the icon is i and putting an SVG in place.

Behold:

inserir a descrição da imagem aqui

See the code not working:

I removed the relevant links for easy viewing.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Template Model</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
      integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
      crossorigin="anonymous"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Ballet&family=Poppins&display=swap"
      rel="stylesheet"
    />
    <style>
      /* VARIABLES */
      :root {
        --base-1: #f4f4f4;
        --color-1: #633517;
      }

      /* RESET */
      * {
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 400;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      a {
        text-decoration: none;
      }

      ul,
      li {
        list-style: none;
      }

      img {
        display: block;
        width: 100%;
      }

      html {
        background: var(--base-1);
      }

      /* STYLE */

      .container {
        width: 1140px;
        margin: 0 auto;
      }

      @media (max-width: 1200px) {
        .container {
          width: 960px;
        }
      }

      @media (max-width: 992px) {
        .container {
          width: 720px;
        }
      }

      @media (max-width: 786px) {
        .container {
          width: 540px;
        }
      }

      @media (max-width: 576px) {
        .container {
          width: 100%;
        }
      }

      .header {
        border-bottom: 2px solid var(--color-1);
      }

      .nav {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .logo {
        font-family: 'Ballet', cursive;
        font-size: 24px;
        color: var(--color-1);
        flex-basis: 250px;
        letter-spacing: 5px;
      }

      .logo:hover {
        transform: scale(1.1);
      }

      .burger {
        color: var(--color-1);
        transform: scale(2);
        display: none;
      }

      .burger:hover {
        transform: scale(2.1);
      }

      .menu {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .menu__item {
        font-size: 18px;
        color: var(--color-1);
      }

      .menu__item:hover {
        transform: scale(1.1);
      }

      .menu > .menu__item {
        margin-left: 20px;
      }

      .menu > .menu__item:last-child {
        margin-left: auto;
        font-size: 12px;
        display: none;
      }

      .dropdown {
        margin-left: 20px;
        position: relative;
        cursor: pointer;
      }

      .dropdown__btn {
        display: flex;
        align-items: center;
        color: var(--color-1);
      }

      .dropdown__btn > span {
        font-size: 18px;
        padding-right: 5px;
      }

      .dropdown__btn:hover {
        transform: scale(1.1);
      }

      .dropdown__content {
        position: absolute;
        box-shadow: 0 0 3px var(--color-1);
        border-radius: 5px;
        overflow: hidden;
        background: var(--base-1);
        margin-left: -30px;
        display: none;
      }

      .dropdown__item {
        display: inline-block;
        font-size: 18px;
        color: var(--color-1);
        padding: 10px 20px;
        text-align: center;
        width: 100%;
      }

      .dropdown__item:hover {
        color: var(--base-1);
        background: var(--color-1);
      }

      .dropdown:hover > .dropdown__content {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <nav class="nav">
          <a class="logo" href="">LOGO</a>
          <div class="burger">
            <i class="fas fa-bars"></i>
          </div>
          <div class="menu">
             <div class="dropdown">
              <div class="dropdown__btn teste">
                <span>Relatórios</span>
                <i class="fa fa-caret-right" aria-hidden="true"></i>
              </div>
              <div class="dropdown__content">
                <a class="dropdown__item" href="">Clientes</a>
                <a class="dropdown__item" href="">Pedidos</a>
                <a class="dropdown__item" href="">Investimentos</a>
              </div>
            </div>
            <a class="menu__item" href="">Sair</a>
          </div>
        </nav>
      </header>
    </div>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js"
      integrity="sha512-UwcC/iaz5ziHX7V6LjSKaXgCuRRqbTp1QHpbOJ4l1nw2/boCfZ2KlFIqBUA/uRVF0onbREnY9do8rM/uT/ilqw=="
      crossorigin="anonymous"
    ></script>
    <script>
      const dropdown = document.querySelector('.dropdown');
      const dropdown__btn_I = document.querySelector('.dropdown__btn i');

      dropdown.addEventListener('mouseover', () => {
        dropdown__btn_I.classList.toggle('fa-caret-right');
        dropdown__btn_I.classList.toggle('fa-caret-down');
        // console.log(dropdown__btn_I);
      });

      dropdown.addEventListener('mouseout', () => {
        dropdown__btn_I.classList.toggle('fa-caret-right');
        dropdown__btn_I.classList.toggle('fa-caret-down');
        // console.log(dropdown__btn_I);
      });
    </script>
  </body>
</html>

Now, I commented on the script of Font Awesome, worked as expected:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Template Model</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
      integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
      crossorigin="anonymous"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Ballet&family=Poppins&display=swap"
      rel="stylesheet"
    />
    <style>
      /* VARIABLES */
      :root {
        --base-1: #f4f4f4;
        --color-1: #633517;
      }

      /* RESET */
      * {
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 400;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      a {
        text-decoration: none;
      }

      ul,
      li {
        list-style: none;
      }

      img {
        display: block;
        width: 100%;
      }

      html {
        background: var(--base-1);
      }

      /* STYLE */

      .container {
        width: 1140px;
        margin: 0 auto;
      }

      @media (max-width: 1200px) {
        .container {
          width: 960px;
        }
      }

      @media (max-width: 992px) {
        .container {
          width: 720px;
        }
      }

      @media (max-width: 786px) {
        .container {
          width: 540px;
        }
      }

      @media (max-width: 576px) {
        .container {
          width: 100%;
        }
      }

      .header {
        border-bottom: 2px solid var(--color-1);
      }

      .nav {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .logo {
        font-family: 'Ballet', cursive;
        font-size: 24px;
        color: var(--color-1);
        flex-basis: 250px;
        letter-spacing: 5px;
      }

      .logo:hover {
        transform: scale(1.1);
      }

      .burger {
        color: var(--color-1);
        transform: scale(2);
        display: none;
      }

      .burger:hover {
        transform: scale(2.1);
      }

      .menu {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .menu__item {
        font-size: 18px;
        color: var(--color-1);
      }

      .menu__item:hover {
        transform: scale(1.1);
      }

      .menu > .menu__item {
        margin-left: 20px;
      }

      .menu > .menu__item:last-child {
        margin-left: auto;
        font-size: 12px;
        display: none;
      }

      .dropdown {
        margin-left: 20px;
        position: relative;
        cursor: pointer;
      }

      .dropdown__btn {
        display: flex;
        align-items: center;
        color: var(--color-1);
      }

      .dropdown__btn > span {
        font-size: 18px;
        padding-right: 5px;
      }

      .dropdown__btn:hover {
        transform: scale(1.1);
      }

      .dropdown__content {
        position: absolute;
        box-shadow: 0 0 3px var(--color-1);
        border-radius: 5px;
        overflow: hidden;
        background: var(--base-1);
        margin-left: -30px;
        display: none;
      }

      .dropdown__item {
        display: inline-block;
        font-size: 18px;
        color: var(--color-1);
        padding: 10px 20px;
        text-align: center;
        width: 100%;
      }

      .dropdown__item:hover {
        color: var(--base-1);
        background: var(--color-1);
      }

      .dropdown:hover > .dropdown__content {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <nav class="nav">
          <a class="logo" href="">LOGO</a>
          <div class="burger">
            <i class="fas fa-bars"></i>
          </div>
          <div class="menu">
             <div class="dropdown">
              <div class="dropdown__btn teste">
                <span>Relatórios</span>
                <i class="fa fa-caret-right" aria-hidden="true"></i>
              </div>
              <div class="dropdown__content">
                <a class="dropdown__item" href="">Clientes</a>
                <a class="dropdown__item" href="">Pedidos</a>
                <a class="dropdown__item" href="">Investimentos</a>
              </div>
            </div>
            <a class="menu__item" href="">Sair</a>
          </div>
        </nav>
      </header>
    </div>
    <!-- <script
      src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js"
      integrity="sha512-UwcC/iaz5ziHX7V6LjSKaXgCuRRqbTp1QHpbOJ4l1nw2/boCfZ2KlFIqBUA/uRVF0onbREnY9do8rM/uT/ilqw=="
      crossorigin="anonymous"
    ></script> -->
    <script>
      const dropdown = document.querySelector('.dropdown');
      const dropdown__btn_I = document.querySelector('.dropdown__btn i');

      dropdown.addEventListener('mouseover', () => {
        dropdown__btn_I.classList.toggle('fa-caret-right');
        dropdown__btn_I.classList.toggle('fa-caret-down');
        // console.log(dropdown__btn_I);
      });

      dropdown.addEventListener('mouseout', () => {
        dropdown__btn_I.classList.toggle('fa-caret-right');
        dropdown__btn_I.classList.toggle('fa-caret-down');
        // console.log(dropdown__btn_I);
      });
    </script>
  </body>
</html>

I can’t guarantee that this is a viable solution, I just put it to prove it and you realize where the problem is. It will depend on whether or not your judgment uses this script.

OBS:

When I used a script file other than FA, solved the problem.

In case of testing, I used the file fontawesome.min.js in place of all.min.js and it worked:

<script 
 src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/fontawesome.min.js" 
 integrity="sha512-pafh0hrrT9ZPZl/jx0cwyp7N2+ozgQf+YK94jSupHHLD2lcEYTLxEju4mW/2sbn4qFEfxJGZyIX/yJiQvgglpw==" 
 crossorigin="anonymous">
</script>

See working:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Template Model</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
      integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
      crossorigin="anonymous"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Ballet&family=Poppins&display=swap"
      rel="stylesheet"
    />
    <style>
      /* VARIABLES */
      :root {
        --base-1: #f4f4f4;
        --color-1: #633517;
      }

      /* RESET */
      * {
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 400;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      a {
        text-decoration: none;
      }

      ul,
      li {
        list-style: none;
      }

      img {
        display: block;
        width: 100%;
      }

      html {
        background: var(--base-1);
      }

      /* STYLE */

      .container {
        width: 1140px;
        margin: 0 auto;
      }

      @media (max-width: 1200px) {
        .container {
          width: 960px;
        }
      }

      @media (max-width: 992px) {
        .container {
          width: 720px;
        }
      }

      @media (max-width: 786px) {
        .container {
          width: 540px;
        }
      }

      @media (max-width: 576px) {
        .container {
          width: 100%;
        }
      }

      .header {
        border-bottom: 2px solid var(--color-1);
      }

      .nav {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .logo {
        font-family: 'Ballet', cursive;
        font-size: 24px;
        color: var(--color-1);
        flex-basis: 250px;
        letter-spacing: 5px;
      }

      .logo:hover {
        transform: scale(1.1);
      }

      .burger {
        color: var(--color-1);
        transform: scale(2);
        display: none;
      }

      .burger:hover {
        transform: scale(2.1);
      }

      .menu {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .menu__item {
        font-size: 18px;
        color: var(--color-1);
      }

      .menu__item:hover {
        transform: scale(1.1);
      }

      .menu > .menu__item {
        margin-left: 20px;
      }

      .menu > .menu__item:last-child {
        margin-left: auto;
        font-size: 12px;
        display: none;
      }

      .dropdown {
        margin-left: 20px;
        position: relative;
        cursor: pointer;
      }

      .dropdown__btn {
        display: flex;
        align-items: center;
        color: var(--color-1);
      }

      .dropdown__btn > span {
        font-size: 18px;
        padding-right: 5px;
      }

      .dropdown__btn:hover {
        transform: scale(1.1);
      }

      .dropdown__content {
        position: absolute;
        box-shadow: 0 0 3px var(--color-1);
        border-radius: 5px;
        overflow: hidden;
        background: var(--base-1);
        margin-left: -30px;
        display: none;
      }

      .dropdown__item {
        display: inline-block;
        font-size: 18px;
        color: var(--color-1);
        padding: 10px 20px;
        text-align: center;
        width: 100%;
      }

      .dropdown__item:hover {
        color: var(--base-1);
        background: var(--color-1);
      }

      .dropdown:hover > .dropdown__content {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <nav class="nav">
          <a class="logo" href="">LOGO</a>
          <div class="burger">
            <i class="fas fa-bars"></i>
          </div>
          <div class="menu">
             <div class="dropdown">
              <div class="dropdown__btn teste">
                <span>Relatórios</span>
                <i class="fa fa-caret-right" aria-hidden="true"></i>
              </div>
              <div class="dropdown__content">
                <a class="dropdown__item" href="">Clientes</a>
                <a class="dropdown__item" href="">Pedidos</a>
                <a class="dropdown__item" href="">Investimentos</a>
              </div>
            </div>
            <a class="menu__item" href="">Sair</a>
          </div>
        </nav>
      </header>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/fontawesome.min.js" integrity="sha512-pafh0hrrT9ZPZl/jx0cwyp7N2+ozgQf+YK94jSupHHLD2lcEYTLxEju4mW/2sbn4qFEfxJGZyIX/yJiQvgglpw==" crossorigin="anonymous"></script>
    <script>
      const dropdown = document.querySelector('.dropdown');
      const dropdown__btn_I = document.querySelector('.dropdown__btn i');

      dropdown.addEventListener('mouseover', () => {
        dropdown__btn_I.classList.toggle('fa-caret-right');
        dropdown__btn_I.classList.toggle('fa-caret-down');
        // console.log(dropdown__btn_I);
      });

      dropdown.addEventListener('mouseout', () => {
        dropdown__btn_I.classList.toggle('fa-caret-right');
        dropdown__btn_I.classList.toggle('fa-caret-down');
        // console.log(dropdown__btn_I);
      });
    </script>
  </body>
</html>

  • @danilomarto hopes I’ll report one more thing

  • Now it’s working fine. Thank you so much for your help!

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.