[210806] Font Awesome unicord 사용법, @media로 모바일에서 hover 효과 해제하기

Font Awesome unicord 사용법

CDN

/* Fontawesome 5.15.3 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

HTML

<span class="btn_icon"></span>

CSS

.btn_icon::before {
  content: "\f061";
  font-family: "Font Awesome\ 5 Free";
  font-weight: bold;
}

폰트 어썸 아이콘을 유니코드로 사용 할 때는 꼭 font-family와 font-weight를 사용해야 한다!

 

더 자세한 글 읽기

FontAwesome 5 유니코드(Unicode) 사용하기 그리고 CSS3에서 스핀(Spin) – WONY

 

Font Awesome 공식 문서 읽기

Font Awesome

@media로 모바일에서 hover 효과 해제하기

hover 효과는 마우스 커서만 인식한다. 따라서 모바일에서는 사용할 수 없다. 심지어 모바일에서 hover 효과를 사용하면 요소를 클릭했을 때 hover 효과가 발동하고 자동으로 사라지지 않는다. 검색을 통해 미디어쿼리로 이를 해결하는 방법을 알게 되었다.

 

정확히는 CSS Media Queries Level 4에 포함된 Interaction Media 기능 중 hover 를 사용하는 것이라고 하던데 그 부분은 나중에 다시 찾아보겠다.

(찾아봤던 글1, 글2, 글3)

@media (hover: hover) {
  a:hover {
    color: #ff6100;
  }
};