내 Font Awesome 아이콘이 기호 대신 사각형으로 표시되는 이유는 무엇입니까?

Font Awesome 아이콘이 예상대로 표시되지 않음: 대신 사각형이 나타남

Font Awesome 아이콘을 웹 디자인에 통합하면 기호가 다음과 같이 나타날 때 실망스러울 수 있습니다. 빈 사각형. 이 문제는 Font Awesome 클래스의 잘못된 구현으로 인해 자주 발생합니다.

Font Awesome 파일을 포함하는 방법

제공하신 HTML 코드에는 Font에 필요한 CSS 파일이 포함되어 있습니다. 최고:

<link rel="stylesheet" href="css/font-awesome.css">

오류: 누락 클래스

코드가 불완전한 아이콘 클래스를 사용합니다.

<i class="icon-camera-retro"></i>

아이콘을 올바르게 표시하려면 fa 클래스와 아이콘을 지정하는 클래스라는 두 가지 클래스가 필요합니다. fa-camera-retro로.

맞습니다. 구현

<i class="fa fa-camera-retro"></i>

Bootstrap 5 업데이트

Bootstrap 5에서는 fa 접두사가 더 이상 사용되지 않습니다. 새로운 기본값은 fas(솔리드 스타일) 및 fab(브랜드 스타일)입니다.

<i class="fas fa-camera-retro"></i>  <!-- Solid icon -->
<i class="fab fa-twitter"></i>        <!-- Brand icon -->

올바른 클래스를 적용하면 Font Awesome 아이콘이 예상대로 렌더링되어 이전에 디자인을 방해했던 번거로운 사각형이 제거됩니다. .

위 내용은 내 Font Awesome 아이콘이 기호 대신 사각형으로 표시되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!