CSS 내비게이션바 버튼 레이블 자동숨김

1 개요[ | ]

CSS 내비게이션바 버튼 텍스트 자동 숨김
CSS 내비게이션바 버튼 레이블 자동접기
CSS 내비게이션바 아이콘 남기고 버튼 레이블 숨기기

CSS 내비게이션바를 기초로 작성
아이콘은 폰트어썸 활용
화면너비가 600px 이하일 때 버튼 레이블 숨기고, 아이콘 크기 약간 키움

html

Copy

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<style>
body { margin: 0; }
.navbar {
  background: hotpink;
  padding: 0; margin: 0;
  list-style: none;
}
.navbar>li {
  display: inline-block;
}
.navbar>li>a {
  display: block;
  text-decoration: none;
  padding: 10px 20px;
  color: white;
}
.navbar>li>a:hover {
  background: deeppink;
}

@media (max-width: 700px) {
  .navbar .icon {
    font-size: 21px;
  }
  .navbar .text {
		display: none;
  }
}
</style>

<ul class="navbar">
  <li><a href="#">
    <i class="icon fa fa-home"></i>
    <span class='text'>홈</span>
  </a></li>
  <li><a href="#">
    <i class="icon fa fa-calendar"></i>
    <span class='text'>달력</span>
  </a></li>
  <li><a href="#">
    <i class="icon fa fa-bar-chart"></i>
    <span class='text'>통계</span>
  </a></li>
  <li><a href="#">
    <i class="icon fa fa-cog"></i>
    <span class='text'>설정</span>
  </a></li>
  <li><a href="#">
    <i class="icon fa fa-user"></i>
    <span class='text'>로그인</span>
  </a></li>
</ul>

→ 너비 700px 이하에서 버튼 레이블(홈, 달력, 통계...)이 사라짐

2 같이 보기[ | ]