如何创建：图标导航栏

如何创建图标栏

第一步 - 添加 HTML：

<!-- 添加图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a>
  <a href="#"><i class="fa fa-search"></i></a>
  <a href="#"><i class="fa fa-envelope"></i></a>
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a>
</div>

第二步 - 添加 CSS：

垂直实例

.icon-bar {
  width: 90px; /* 设置具体宽度 */
  background-color: #555; /* 深灰色背景 */
}

.icon-bar a {
  display: block; /* 使链接彼此垂直排列，而不是并排排列 */
  text-align: center; /* 居中对齐文本 */
  padding: 16px; /* 添加内边距 */
  transition: all 0.3s ease; /* 为悬停效果添加过渡动画 */
  color: white; /* 文字颜色为白色 */
  font-size: 36px; /* 增加字体大小 */
}

.icon-bar a:hover {
  background-color: #000; /* 添加悬停颜色 */
}

.active {
  background-color: #04AA6D; /* 添加活动/当前颜色 */
}

亲自试一试

水平实例

.icon-bar {
  width: 100%; /* 全宽 */
  background-color: #555; /* 深灰色背景 */
  overflow: auto; /* 由于浮动导致的溢出 */
}

.icon-bar a {
  float: left; /* 并排浮动链接 */
  text-align: center; /* 居中对齐文本 */
  width: 20%; /* 等宽（5 个图标，每个图标宽度为 20% = 100%） */
  padding: 12px 0; /* 一些上下内边距 */
  transition: all 0.3s ease; /* 为悬停效果添加过渡动画 */
  color: white; /* 文字颜色为白色 */
  font-size: 36px; /* 增加字体大小 */
}

.icon-bar a:hover {
  background-color: #000; /* 添加悬停颜色 */
}

.active {
  background-color: #04AA6D; /* 添加活动/当前颜色 */
}

亲自试一试

相关页面

教程：CSS 导航栏

教程：图标教程