글꼴이 로드될 때까지 Font Awesome 자리 표시자 아이콘을 어떻게 숨길 수 있나요?

아이콘 표시를 위한 글꼴 로드 상태 확인

문제:

Font Awesome을 사용할 때 아이콘은 처음에 자리 표시자 문자와 함께 표시됩니다. 글꼴 파일이 로드될 때까지. 이 문제를 해결하기 위한 작업은 로드 프로세스 중에 이러한 자리 표시자 아이콘을 숨기는 것입니다.

해결책:

글꼴 파일 로드 상태를 감지하려면 jQuery-FontSpy 플러그인을 활용하세요. . 이 플러그인은 원하는 글꼴과 임의의 대체 글꼴 간의 글꼴 너비 불일치를 평가합니다. 너비가 일치하면 원하는 글꼴이 언로드된 상태로 유지됩니다. 그렇지 않으면 성공적으로 로드된 것입니다.

플러그인 구현:

1. jQuery-FontSpy 스크립트 포함:

<script src="scripts/jquery-fontSpy.js"></script>

2. 원하는 플러그인을 초기화하세요. 요소:

$('.icon-container').fontSpy({
  onLoad: 'fa-loaded',
  onFail: 'fa-not-loaded',
});

3. 로드 및 실패 상태에 대한 스타일 정의:

.fa-loaded {
  display: block;
}

.fa-not-loaded {
  display: none;
}

jQuery-FontSpy를 사용하면 처음에는 아이콘이 숨겨집니다. 글꼴 로드 시 'onLoad' 클래스가 적용되어 아이콘 숨김이 해제됩니다. 글꼴 로드에 실패하면 'onFail' 클래스가 적용되어 아이콘이 숨겨집니다. 이 플러그인은 아이콘 표시를 정밀하게 제어하여 글꼴이 완전히 로드되기 전에도 최적의 사용자 경험을 보장합니다.

위 내용은 글꼴이 로드될 때까지 Font Awesome 자리 표시자 아이콘을 어떻게 숨길 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!