Navbar with svg icons

HTML-CSS
1

Hey everyone! So I’m trying a create a navbar with social media icons, but I’m having trouble, would really appreciate help with a couple of the questions:

Firstly, here’s the code:
https://codepen.io/goprime/pen/yqErRj

-How do I resize the icon? I want all icons to be centered in the nav, I’ve tried, but I always end up either making it too big, or nothing changes.

  • After adding hover state to the icon, the color should change only on hovering upon the icon, BUT when the cursor is around the icon, it still changes color. Why is this happening? and can I fix this to be only when hovering upon the icon

-How do I make it responsive? Do I have to use media queries or is there any other way?

I’d really appreciate any help with this, thanks!

2

You may use in css something like:

svg{
transform: scale(0.5);
}

Read also this article to find some other solutions that fits your need.

1 Like
3

Try adjusting the width and height of the svg

You have made it as flex, if you apply justify-content: space-evenly, you will see the two images spread evenly

You mean image ?

1 Like
4

trying something like:

svg {
  width: 32px;
  height: 32px;
}

will produce something like:
svgs

As i said above svgs behave a little different from imgs at least when you load the svg as <use xlink:href="...."></use>

5

Yep, the svg image, when I resize, it retains the original size

6

Yes because svg’s are not images, they behave as a text like form, i wanted @goprime10 to know why those hover state were acting when hovering around image

7

You can refer the article @sorinr suggested above, before considering the usage, i’ll place it here too,

1 Like