Responsive menu button does not show desired icon. Bootstrap

3

I'm adding a dynamic menu so when this is on a small device I see a button that displays the options. The problem is that I do not see the icon I chose in the bootstrap components glyphicon glyphicon-menu-hamburger only a small box appears. By choosing a relatively smaller component if it looks good to me.

This is the code I'm using:

<header class="container">
  <div id="menu" class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
      <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="glyphicon glyphicon-menu-hamburger "></span>
      </button>          
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="nav active"><a href=".">Home</a>
        </li>
        <li class="nav"><a href="about.html">About</a>
        </li>
        <li class="nav"><a href="contact.html">Story</a>
        </li>
        <li class="nav"><a href="contact.html">FAQ</a>
        </li>
        <li class="nav"><a href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</header>
    
asked by Henry Caballero 10.10.2016 в 20:38
source

2 answers

1

What I understood about your problem was that the menu-hamburger icon does not seem right to you? if so, I tested your code and if it appears, it may be the color of the font that is lost with the color of the button, try changing it!

    
answered by 10.10.2016 в 21:34
1

The Solution is simple:

1) Make sure the font size is the right one

2) Make sure the color of the font is not the same color as the background of the parent element that wraps it.
3) If none of the above options worked for you, change a FontAwesome, personally has better vectorization of icons and more variety. The link to the page is as follows: link
4) As a final recommendation, your basic design learning begins in Illustrator in Windows and Corel Draw in Centos and design your own icons.

    
answered by 07.10.2017 в 15:29