Question

我正在尝试创建垂直向左导航菜单。它有8个图标，在这些图标的正下方有文字。我不能使用任何图标字体工具包或库。我得到了png格式的8个图标，所以我必须使用它。我一直在网上阅读该做什么和不该做什么以及反对使用“ 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中。希望这能为您提供所需的答案，我知道您想知道是应该使用还是应该使用。至于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>

垂直图标按钮导航无字体棒

1 个答案: