html - 没有字体的垂直图标按钮导航真棒

Question

我正在尝试创建一个垂直的左侧导航菜单。它有 8 个图标，图标下方有文字。我不能使用任何图标字体工具包或库。我得到了 8 个 png 格式的图标，所以这就是我必须使用的。我一直在网上阅读该做什么和不该做什么以及反对使用“i”标签的论点，但我不确定从哪里开始/结束。我去了 W3schools，甚至那里的垂直菜单上的文章都使用了很棒的字体。

我如何复制这个 https://www.w3schools.com/howto/howto_css_icon_bar.asp没有很棒的字体和按钮图标下方的文字？

根据回复，我觉得有必要包含我试图引用的关于标签的链接。

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

Answer 1

这是一个有效的代码片段，所有解释都在 css 中。我希望这能给你你需要的答案，我知道你想知道你是否应该使用 or 但这应该有效。至于 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>