폰트 어썸
폰트 어썸 팀이 제공하는 워드프레스 사이트에서 폰트 어썸 무료 또는 프로 아이콘을 사용하는 공식적인 방법입니다.
기능
공식 플러그인을 사용하면 페이지, 글, 템플릿에 폰트 어썸 아이콘을 쉽게 추가할 수 있으며 다음과 같은 기능이 포함되어 있습니다:
- 최신 릴리스 또는 특정 릴리스에서 프로 또는 무료 아이콘을 사용하세요.
- 프로 키트에서 사용자 지정 아이콘을 사용하세요.
- 최신 듀오톤 스타일과 사용자 정의 아이콘을 포함한 모든 아이콘을 추가하려면 폰트 어썸 키트를 사용하거나 버전 5 아이콘 전용 폰트 어썸 CDN을 선택하세요.
- 사용자 또는 플러그인이 여전히 버전 4 구문을 사용하는 경우 폰트 어썸 버전 4에 대한 자동 호환성을 설정합니다.
- 다른 플러그인/테마에서 여러 버전의 폰트 어썸을 사이트에 로드할 때 예기치 않은 아이콘 표시 또는 기술적 문제가 발생할 수 있는 문제 해결 및 문제 해결.
사용 방법
플러그인 설치 및 활성화 (자세한 내용은 설치 탭을 참조하세요.)
아이콘 추가 및 스타일 지정 방법 플러그인 사용 및 아이콘 추가 방법에 대한 전체 문서는 폰트 어썸 문서 사이트에서 확인할 수 있습니다.
블록 편집기에서 아이콘 추가하기 플러그인을 설정한 후에는 아이콘을 블록으로 추가하거나 텍스트와 함께 인라인으로 추가할 수 있습니다.
아이콘을 블록으로 추가하려면 ‘글꼴 멋진 아이콘’ 블록을 선택한 다음 ‘아이콘 선택 버튼’을 클릭하여 아이콘 선택기를 엽니다.
아이콘을 인라인으로 추가하려면 서식 도구 모음에서 글꼴 멋진 옵션을 선택하여 아이콘 선택기를 엽니다. (참고: 인라인 아이콘을 사용하려면 WP 6.3 이상이 필요합니다.)
아이콘 선택기를 연 후 아이콘을 추가합니다:
- 원하는 아이콘 검색하기 – 아이콘 이름, 카테고리 또는 키워드로 검색할 수 있습니다.
- 다른 스타일의 아이콘을 원하는 경우 드롭다운을 사용하여 패밀리 및 스타일을 변경합니다.
- 원하는 아이콘이 보이면 클릭하여 페이지 또는 글의 콘텐츠에 입력합니다.
주: 아이콘 선택기에서 프로 아이콘을 검색하고 추가하려면 플러그인이 프로 키트를 사용하도록 설정했는지 확인하세요.
클래식 편집기에서 아이콘 추가하기
클래식 편집기에서 아이콘을 추가해야 하는 경우 쇼트코드 또는 HTML로 아이콘 이름을 사용할 수 있습니다. 텍스트 영역에 쇼트코드를 사용하여 아이콘을 추가하려면 아이콘 이름과 스타일 접두사를 추가하면 되는데, 여기서 접두사는 사용하려는 아이콘의 스타일입니다(이 접두사는 아이콘의 스타일입니다). 아이콘 이름에 fa- 부분을 포함할 필요는 없습니다. 스타일 접두사를 포함하지 않으면 아이콘은 기본적으로 클래식 단색 스타일로 설정됩니다.
아이콘의 쇼트코드는 다음과 같습니다:
[icon name="stroopwafel"]
[icon name="stroopwafel" prefix="fa-sharp fa-light"]
다음과 같이 표준 폰트 어썸 구문과 함께 기본 HTML을 사용할 수도 있습니다:
<i class="fa-solid fa-stroopwafel"></i>
프로 아이콘 및 기능 사용하기 키트를 사용하여 아이콘을 강화하려면 FontAwesome.com에서 키트 생성하고 키트 설정 탭에서 “프로 아이콘”을 선택합니다. 그런 다음 폰트 어썸 계정 페이지에서 API 토큰을 가져와서 워드프레스 플러그인 설정에 추가하세요.
CDN을 사용하여 아이콘을 구동하려면 버전 5의 아이콘만 사용할 수 있다는 점을 알아두세요. 프로 아이콘을 사용하려면 폰트 어썸 CDN 설정 페이지의 허용 도메인 목록에 사이트 도메인을 추가한 다음 쇼트코드 또는 HTML을 사용하여 콘텐츠에 아이콘을 추가하세요.
플러그인 문제 해결 폰트 어썸 아이콘은 인기가 많기 때문에 많은 테마와 플러그인에서도 폰트 어썸을 로드하며, 때로는 해당 버전이 회원님의 버전과 충돌할 수 있습니다. 그래서 저희는 이러한 충돌 버전을 찾아서 아이콘에 영향을 미치지 않도록 방지하는 방법을 만들었습니다: 바로 충돌 감지 스캐너입니다.
플러그인이 올바르게 설정된 것 같은데도 아이콘이 로드되지 않고 이유를 잘 모르겠다면 두 부분으로 구성된 문제 해결 탭으로 이동하세요:
- 다른 폰트 어썸 버전과의 충돌 감지 – 충돌 감지 스캐너를 시작하여 사이트에 로드 중인 폰트 어썸 버전을 찾을 수 있습니다.
- 사이트에서 활성화된 폰트 어썸 버전 – 스캐너 결과를 표시하고 충돌하는 버전이 사이트에 다른 버전의 폰트 어썸을 로드하는 것을 방지할 수 있습니다.
문제 해결을 위한 스캐너 사용에 대한 자세한 내용은 폰트 어썸 워드프레스 문서에서 확인하세요.
설정
플러그인은 기본적으로 폰트 어썸 CDN을 통해 폰트 어썸 무료 아이콘을 웹 글꼴로 제공하도록 설정되어 있습니다. 플러그인에서 바로 CDN 설정을 변경할 수 있습니다. 기본 무료 아이콘만 원하는 경우 기본 구성을 변경할 필요가 없습니다.
사용 가능한 모든 설정과 문제 해결에 대한 자세한 내용은 폰트 어썸 워드프레스 문서에서 확인할 수 있습니다.
플러그인 버전 4에서 업그레이드하기
- 블록 편집기 콘텐츠 등에 있는
[icon]쇼트코드는 이전과 마찬가지로 계속 작동합니다, 하지만 블록 편집기에서 아이콘 선택기로 추가한 새 아이콘은 인라인 SVG가 됩니다. 이전에 추가된[icon]쇼트코드는 새로운 인라인 SVG로 자동 변환되지 않습니다. 형식으로 자동 변환되지 않습니다.[icon]쇼트코드를 변환하려면 블록 에디터의 아이콘 선택기를 사용하여 삭제하고 아이콘을 다시 추가하세요.
참조
GitHub의 README에는 워드프레스 사이트 소유자와 개발자를 위한 자세한 내용이 있습니다.
사용 가능한 모든 설정과 문제 해결에 대한 자세한 내용은 폰트 어썸 워드프레스 문서에서 확인할 수 있습니다.
개발자를 위한 API 문서도 있습니다.
