如何创建：图标导航栏

아이콘 탐네이션 창 만들기

단계 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>

두 번째 단계 - 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 네비게이션 바

가이드:아이콘 가이드