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

by JM note

HTML

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