如何創建：圖標導航欄

如何創建圖標欄

第一步 - 添加 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 導航欄

教程：圖標教程