Как изменить значок гамбургера bootstrap для панели навигации в bootstrap 4?

Question

У меня возникают проблемы при смене иконки в Navbar для bootstrap 4. Мой текущий html выглядит следующим образом:

и CSS:

.navbar-light .navbar-toggler-icon {
   background-image: url("images/hamburger-icon.svg");
}

.navbar-inverse .navbar-toggler-icon {
    background-image: url("images/hamburger-icon.svg");
}

.custom-toggler .navbar-toggler-icon {
   background-image: url("images/hamburger-icon.svg");
 }

Изображение в images/hamburger-icon.svg, что я тут не так делаю?

Answer 1

Dear please use this css it will work:


 .navbar-light .navbar-toggler-icon {
       background-image: url("images/hamburger-icon.svg");
       background-size: 100%;
       background-position: center center;
       width: 30px;
       height: 30px;
       display: flex;
    }

    .navbar-inverse .navbar-toggler-icon {
       background-image: url("images/hamburger-icon.svg");
       background-size: 100%;
       background-position: center center;
       width: 30px;
       height: 30px;
       display: flex;

    }

    .custom-toggler .navbar-toggler-icon {
       background-image: url("images/hamburger-icon.svg");
       background-size: 100%;
       background-position: center center;
       width: 30px;
       height: 30px;
       display: flex;
     }