アイコンナビゲーションバーの作成方法

アイコンバーを作成する方法

第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: #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ナビゲーションバー

チュートリアル：アイコンのチュートリアル