fontawesome 표시 안 함◻사각형으로 변할 때의 대처법

2875 단어 HTMLCSS
이번 보도에서는 fontawesome 이 매우 편리한 웹 아이콘 도구를 사용하기 위해 읽었지만,
잘 보이지 않는 상황에서의 해결 모델을 소개해 드리겠습니다.

버전 확인


버전부터 확인해 볼까요?
CDN을 사용하는 경우 링크에 버전이 적혀 있습니다. 거기를 확인하십시오.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
"v5.8.2"입니다.
2019년 5월까지 이 버전은 최신이다.
이전 버전은 4에서 시작된 버전입니다.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
4.7.0이라고 적혀 있다.
이 버전에 따라 사용할 수 있는 아이콘의 종류와 css에서 지정한 방법이 달라집니다.

사용 가능한 아이콘 확인


각 버전에서 사용할 수 있는 아이콘을 확인하는 방법은 다음과 같습니다.
우선 일반fontawesome의 페이지에서 검색한 결과 새 버전의 본능이 사용하는 아이콘이다.
첫 페이지 아래 부분의 ↓ 빨간색 테두리로 둘러싸인 곳에서 날아온 곳은 구버전에서 사용할 수 있는 아이콘 일람이다.

CSS 지정 확인


CSS에 지정된 경우 content: "\f105"; 느낌으로 기술합니다.
버전에 따라 font-family를 지정해야 합니다.
새 버전
li::before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f105";
}
이전 버전
li::before {
  font-family: FontAwesome;
  content: "\f105";
}

Free 아이콘


PRO 아이콘은 유료 버전만 사용할 수 있습니다. 주의하십시오.

기타


또한 Font-weight의 값을 바꾸면 표시됩니다.
이 기사에 쓰인 방법으로 표현할 수 있다면 다행이다!

좋은 웹페이지 즐겨찾기