Adding my own menu icon for navigation bar?

Question

With Bootstrap I have implemented a menu , which works if I set a text for the menu :

            <button class="navbar-toggler" data-toggle="collapse" data-target = ".navbarSupportedContent">
                menuText
                //simply put here my own image
            </button>

I would like to insert my photo instead of menuText , couldn't see anyone who does that. Can I simply add an image ?

Answer 1

Use the img tag and define the src attribute to be the image you wish to show.

See working example below:

 .navbar-toggler img { height: 100px; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <button class="navbar-toggler" data-toggle="collapse" data-target=".navbarSupportedContent"> <p>menuText</p> <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" alt="Stackoverflow icon"/> </button> 

If you wish to remove "menuText" entirely and just have the image you can remove

<p>menuText</p>