沒有字體的垂直圖標按鈕導航

Question

我正在嘗試創建一個垂直的左側導航菜單。 它有8個圖標，在這些圖標的正下方有文字。 我不能使用任何圖標字體工具包或庫。 我得到了png格式的8個圖標，所以我必須使用它。 我一直在網上閱讀該做什么和不該做什么以及反對使用“ i”標簽的論點，但是我不確定從哪里開始/結束於此。 我去了W3schools，甚至垂直菜單上的文章都使用了很棒的字體。

我該如何復制https://www.w3schools.com/howto/howto_css_icon_bar.asp，而不會在按鈕圖標下添加令人敬畏的字體和文本？

基於響應，我覺得有必要包括我嘗試引用的有關標簽的鏈接。

我應該使用<i>標簽而不是<span>嗎？

Answer 1

這是一個工作代碼段，所有說明都在CSS中。 希望這能為您提供所需的答案，我知道您想知道是應該使用還是應該使用。 至於SEO（搜索引擎優化），這應該沒問題，因為您有a標簽。

 /*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>