Bootstrap 4.0 customize hamburger icon

Question

I'm trying to change the color of the three lines and the border around the icon

through css but not sure which tags to call to modify it.

CSS:

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler-icon{
  border-color: white;
}
/* change the background color */
.navbar-custom {
    background-color: red;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: yellow;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: black;
}

HTML:

 <nav class="navbar navbar-expand-md navbar-custom">
      <a class="navbar-brand" href="#"><img src="img/logo.png" class="img-fluid"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse"    data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
</nav>

Answer 1

This answer was previously posted here: Bootstrap 4 Change Hamburger Toggler Color

From the other author:

"The navbar-toggler-icon (hamburger) in Bootstrap 4 uses an SVG background-image. There are 2 "versions" of the toggler icon image. One for a light navbar, and one for a dark.."

// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
   background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-inverse .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;..");
}

"So if you want to change the color of this image to something else, you can customize the icon. For example, here I set the RGB value to pink (255,102,203). Notice the stroke='rgba(255,102,203, 0.5)' value in the SVG data:"

.custom-toggler .navbar-toggler-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
 }