没有字体的垂直图标按钮导航

Question

I am trying to create a vertical left navigation menu. It has 8 icons with text right beneath the icons. I cannot use any icon font toolkit or libraries. I was given the 8 icons in png format so that is what I have to work with. I have been reading online the do and don't and arguments against using "i" tag but I'm not sure where to begin/end with this. I went to W3schools and even the article there on vertical menu is using font awesome.

How can I replicate this https://www.w3schools.com/howto/howto_css_icon_bar.asp without font awesome and text beneath the icon of the button?

Based on the respone I feel the need to include the link I am trying to referring to about the tag.

Should I use <i> tag for icons instead of <span>?

Answer 1

This is a working code snippet, all explanations are in the css. I hope this gives you the answer you needed, I know you wanted to know if you should use or but this should work. As for SEO (Search Engine Optimization) this should be fine since you have an a tag.

 /*This is a vertical nav bar that will take the whole height, the width of it isn't fixed since the text might take space so it has to expand as needed*/ *{ padding:0; margin:0; box-sizing: border-box; } html,body{ height:100%; width:100%; } /*The vertical nav bar*/ .container { height:100%; border-right: 1px solid black; position: fixed; left:0; top:0; } /*put it as <a> to link it to somewhere else, this wraps the image and the text together*/ a.wrapper{ color: black; text-decoration: none; /*Flex column to align the image and the text underneath each other*/ display:flex; flex-direction: column; align-items: center; padding:5px; margin-bottom:15px; } a.wrapper:hover{ background: green; } .container .wrapper .img-wrapper{ /*Having an image container with a fixed width and the image itself at 100% width is the best thing you could do for images, because the image will take the needed height to not lose any img clarity*/ width:30px; margin-bottom:5px; } .container .wrapper img { width:100%; } .container .wrapper p { font-family: helvetica; font-size: 0.9em; } 

 <div class="container"> <a class="wrapper" href="https://google.com"> <div class="img-wrapper"> <img src="https://png.icons8.com/metro/1600/ps.png"> </div> <p>Item 1</p> </a> <a class="wrapper" href="https://google.com"> <div class="img-wrapper"> <img src="https://png.icons8.com/metro/1600/ps.png"> </div> <p>Item 1</p> </a> <a class="wrapper" href="https://google.com"> <div class="img-wrapper"> <img src="https://png.icons8.com/metro/1600/ps.png"> </div> <p>Item 2929292</p> </a> </div>