How to put an icon in the navbar?

1

Hy…I already asked this question but nothinh works. I would Like a step by step instructions on how to do it bcs nothing works for me…

Thanks in advance

2

could u share the code??

3

https://codepen.io/rebecca-milosavljevic/pen/ZEONKVm

4

I’m a beginner too but what I did, I put this on the html

<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">

In the css

.logo {
  display: block;
  width: 5%;
}

!-- that width in my example it’s due to the width of the random logo I used it (768x768) --!

And add this to “nav” in your CSS centralize your flexbox

align-items: center;

As I said I’m a beginner as well, so I hope it helps. But i’m sure someone with more experience will say something in no time. Happy coding!

1 Like
5

My website is an example step by step:

First I added some tags:

Just like this:

<nav>
       <li>
            <a href="./index.php">
            <img class="logo" src="./images/LOGO-BYEBOOMER.png" alt="LOGO DE BYE BOOMER"/>
             </a>
       </li>
</nav>


/* After that I just added some changes to my .css file to personalize it: */


li {
                width: 99.9vw;
                height: 6.5vw;
                margin-left: -1vw;
                margin-top: -8px;
                list-style-type: none;
                background-color: white;
                box-shadow: 1px 1px 1px gray;
                display: flex;
                flex-direction: row;
                position: fixed;
                z-index: 2;
            }
            
            .logo {
                width: 5vw;
                height: 5vw;
                position: absolute;
                top: 0.8vw;
                left: 1.5vw;
            }

Maybe it’s not the best way to do it absolute, but it’s more easy to me and it just works.

Results:
image

Website: byeboomer.ml

-If I’m not able to link my website please tell me-

6

Hi in addition you can also use fontawesome icons you have to use cdn link and you can use their free icons.

7