图标栏

---

了解如何使用 CSS 创建图标栏。

---

垂直:

亲自试一试 »

水平:

 

亲自试一试 »

---

如何创建图标栏

步骤 1) 添加 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>

---

---

步骤 2) 添加 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: #4CAF50; /* 添加活动/当前颜色 */
} 亲自试一试 »

水平实例

.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: #4CAF50; /* 添加活动/当前颜色 */
} 亲自试一试 »

---

相关页面

提示: 转到我们的 CSS 导航栏教程，了解有关导航栏的更多信息。

提示: 转到我们的 Icons 图标教程 以了解有关图标的更多信息。