WordPress에 글꼴 멋진 아이콘을 추가하는 방법 – 전체 가이드

게시 됨: 2017-07-04

이것이 이 가이드의 모든 것입니다. 읽기를 마치면 다음을 수행하는 방법을 정확히 알게 됩니다.

  • Font Awesome 스타일시트를 WordPress에 수동으로 추가
  • 무료 플러그인으로 WordPress에 Font Awesome 추가
  • 다양한 방법으로 Font Awesome 아이콘 삽입 및 스타일 지정

파헤쳐보자…

내용물

  • 1 WordPress에 글꼴 굉장 아이콘을 추가하는 데 시간을 들여야 하는 이유
  • 2 WordPress에 글꼴 굉장 아이콘을 수동으로 추가하는 방법
    • 2.1 1단계: WordPress 테마에 Font Awesome 스타일시트를 대기열에 추가
    • 2.2 2단계: 멋진 글꼴 아이콘 삽입
  • 3 플러그인을 사용하여 WordPress에 글꼴 멋진 아이콘을 추가하는 방법
    • 3.1 1단계: 플러그인 설치 및 활성화
    • 3.2 2단계: 멋진 글꼴 아이콘 삽입
  • 4 글꼴 멋진 아이콘의 스타일을 지정하고 크기를 변경하는 방법
    • 4.1 Font Awesome 아이콘 크기 변경
    • 4.2 글꼴 굉장 아이콘 회전
    • 4.3 Font Awesome 아이콘에 애니메이션 추가
    • 4.4 글꼴 굉장 아이콘 색상 변경
  • 5 정리하기
    • 5.1 관련 게시물

WordPress에 멋진 글꼴 아이콘을 추가해야 하는 이유

Font Awesome 아이콘은 이름에서 알 수 있듯이 이미지가 아니라 아이콘 글꼴이기 때문에 훌륭합니다. 즉, 다음과 같은 멋진 일을 할 수 있습니다.

  • 아이콘이 벡터이기 때문에 품질을 잃지 않고 크기 조정
  • 색상 변경, 애니메이션 추가 및 기타 CSS 조작 사용

즉, Font Awesome 아이콘은 정적 이미지를 사용하는 것보다 훨씬 우수합니다.

먼저 사이트에 추가하는 두 가지 방법을 보여 드리겠습니다. 그런 다음(어떤 방법을 선택하든 상관없이) 아이콘의 스타일을 지정하고 조작하는 방법을 보여 드리겠습니다.

WordPress에 글꼴 굉장 아이콘을 수동으로 추가하는 방법

테마 코드를 파헤치는 것이 두렵다면 무료 플러그인을 사용하여 WordPress에 Font Awesome 아이콘을 추가하는 방법을 보여주는 다음 섹션으로 건너뛰는 것이 좋습니다.

그렇지 않으면, Font Awesome을 실행하고 실행하는 멋지고 가벼운 방법을 위해 이 방법을 좋아합니다.

기본적으로 WordPress 테마에 Font Awesome 스타일시트를 추가하기만 하면 됩니다. 그런 다음 Font Awesome 아이콘을 삽입하고 원하는 대로 스타일을 지정할 수 있습니다.

전체 프로세스가 단계별로 작동하는 방식은 다음과 같습니다.

1단계: WordPress 테마에 Font Awesome 스타일시트를 대기열에 추가

내가 말했듯이 첫 번째 단계는 Font Awesome CSS 스타일시트를 WordPress 테마에 추가하는 것입니다. Font Awesome 웹 사이트에서 직접 얻을 수 있지만 내가 선호하는 방법은 Bootstrap CDN에서 호스팅되는 버전을 사용하는 것입니다.

현재 해당 링크는 다음과 같습니다.

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

그러나 Font Awesome이 새 버전을 출시함에 따라 변경될 것입니다. 따라서 링크를 최신 버전으로 반 정기적으로 업데이트하는 것이 좋습니다(이전 버전은 계속 작동함).

이 스타일시트를 WordPress 에 추가하려면 자식 테마의 functions.php 파일에 추가해야 합니다. CSS를 추가하는 기본 방법은 링크를 헤더에 넣는 것이지만 스타일시트를 헤더에 직접 넣는 대신 특별한 WordPress enqueue 기능을 사용하는 것이 가장 좋습니다.

또한 하위 테마를 사용하면 테마를 업그레이드해야 하는 경우 변경 사항을 덮어쓰지 않습니다.

WordPress 코드 모범 사례를 따르는 것이 좋기 때문에 자식 테마와 대기열에 넣기 기능을 모두 사용하는 것이 좋습니다.

확인 방법은 다음과 같습니다.

모양 → 편집기 로 이동하여 하위 테마에 대한 functions.php 파일을 선택하십시오.

그런 다음 이 코드를 붙여넣습니다.

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

WordPress에 Font Awesome 추가

변경 사항을 저장하면 완료됩니다! 너무 아프지 않죠?

2단계: 멋진 글꼴 아이콘 삽입

스타일시트를 대기열에 넣은 후에는 Font Awesome 아이콘 검색으로 이동하여 삽입하려는 아이콘을 찾아 사이트에 Font Awesome 아이콘을 삽입할 수 있습니다.

아이콘을 클릭하면 Font Awesome에서 아이콘을 사용하는 데 필요한 코드를 제공합니다.

WordPress 편집기의 텍스트 탭에 해당 코드를 배치하여 사이트에 아이콘을 추가하기만 하면 됩니다.

그리고 그게 다야! WordPress에 Font Awesome 지원을 성공적으로 추가했습니다. 이제 WordPress 사이트에서 Font Awesome 아이콘의 스타일을 지정하는 방법을 배우기만 하면 됩니다.

그러나 그것을 보여주기 전에 Font Awesome Support를 추가하는 플러그인 방법을 살펴보고 싶습니다. 플러그인 방법보다 수동 방법을 사용하는 경우 건너뛰어도 됩니다.

플러그인을 사용하여 WordPress에 글꼴 멋진 아이콘을 추가하는 방법

Font Awesome 스타일시트를 수동으로 대기열에 넣는 대신 플러그인을 사용하고 싶다면 WordPress.org에 Better Font Awesome이라는 견고한 무료 옵션이 나열되어 있습니다.

Better Font Awesome은 항상 최신 스타일시트를 사이트에 추가하는 것 외에도 다음을 수행합니다.

  • 단축 코드를 사용하여 Font Awesome 아이콘을 포함할 수 있습니다.
  • TinyMCE Editor에서 아이콘을 삽입할 수 있는 드롭다운 메뉴를 제공합니다.

Font Awesome 아이콘을 정기적으로 사용할 계획이라면 이 두 가지 도구를 사용하면 더 쉽게 사용할 수 있습니다. 그러나 자주 사용하지 않는 경우 수동 방법이 가장 가볍기 때문에 가장 간단한 옵션이라고 생각합니다.

1단계: 플러그인 설치 및 활성화

Font Awesome을 추가하려면 플러그인을 설치하고 활성화하기만 하면 됩니다. 정말 아무것도 없습니다.

Settings → Better Font Awesome 으로 이동하여 액세스할 수 있는 기본 설정 패널이 있지만 모든 것을 기본값으로 그대로 둘 수 있습니다.

2단계: 멋진 글꼴 아이콘 삽입

플러그인으로 Font Awesome 아이콘을 삽입하려면 두 가지 옵션이 있습니다.

  • 이전 섹션에서 설명한 것처럼 Font Awesome 웹 사이트의 코드를 사용합니다.
  • 드롭다운에서 생성할 수 있는 단축 코드를 사용합니다.

이전 섹션에서 첫 번째 방법을 이미 보여 주었으므로 드롭다운 단축 코드 생성기에 대해 간단히 살펴보겠습니다.

새 게시물이나 페이지를 만들 때 미디어 추가 버튼 옆에 새로운 아이콘 삽입 버튼이 표시됩니다. 클릭하면 사용 가능한 모든 Font Awesome 아이콘과 결과를 필터링하는 옵션이 표시됩니다.

선택한 아이콘을 클릭하기만 하면 플러그인이 적절한 단축 코드를 삽입합니다.

WordPress에 글꼴 멋진 아이콘 추가

그리고 그게 전부입니다!

이제 Font Awesome 아이콘이 지원되므로 Font Awesome 아이콘의 스타일을 지정하고 조작할 수 있는 몇 가지 방법을 살펴보겠습니다.

글꼴 멋진 아이콘의 스타일을 지정하고 크기를 변경하는 방법

WordPress에 Font Awesome을 추가하는 데 사용한 방법에 관계없이 동일한 기본 원칙을 사용하여 아이콘 스타일을 지정합니다.

또한 이러한 명령은 Shortcode를 사용하든 Font Awesome 사이트의 내장 코드를 사용하든 상관없이 작동합니다.

이 팁의 대부분은 Font Awesome 예제 페이지에서 바로 가져오므로 호환성에 대해 걱정할 필요가 없습니다.

글꼴 굉장 아이콘의 크기 변경

Font Awesome 아이콘의 크기를 늘리는 기본적인 것부터 시작하겠습니다. 기본적으로 아이콘은 상당히 작기 때문에 이러한 상황이 발생할 수 있습니다.

아이콘 크기를 늘리려면 다음 수정자 중 하나를 사용할 수 있습니다.

  • fa-lg – 크기를 33% 증가시킵니다.
  • fa-2x – 두 배 크기
  • fa-3x – 3배 크기
  • fa-4x – …
  • fa-5x – …

이러한 수식어를 사용하려면 코드의 경우 아이콘 이름 뒤에 추가하고(따옴표 안에), 단축 코드의 경우 클래스 따옴표 안에 추가하기만 하면 됩니다. 다음은 두 포함 방법에 대해 아이콘 크기를 3배로 늘리는 예입니다.

  • <i class=”fa fa-download fa-3x ” aria-hidden=”true”></i>
  • [아이콘 이름 = "다운로드"클래스 =" fa-3x "]

예를 들면 다음과 같습니다.

프런트 엔드에서 다음과 같이 됩니다.

글꼴 멋진 아이콘 회전

Font Awesome 아이콘을 쉽게 회전하여 방향을 변경할 수도 있습니다.

다음은 회전에 대한 수정자입니다. 위의 크기 수정자와 정확히 동일한 것을 사용할 수 있습니다.

  • fa-rotate-90 – 90도 회전
  • fa-rotate-180 – 180도 회전
  • fa-rotate-270 – 270도 회전
  • fa-flip-horizontal – 수평 축을 따라 아이콘을 뒤집습니다.
  • fa-flip-vertical – 수직 축을 따라 아이콘을 뒤집습니다.

글꼴 굉장 아이콘에 애니메이션 추가

아이콘에 몇 가지 기본 애니메이션을 추가할 수도 있습니다. Font Awesome은 회전을 추가할 수 있는 두 가지 수정자를 제공합니다.

  • fa-spin - 부드러운 회전 추가
  • fa-pulse – 아이콘을 8단계로 회전시킵니다.

이러한 애니메이션은 원형 아이콘과 가장 잘 짝을 이룹니다. 다른 이상한 모양의 아이콘을 사용하면 효과가 약간 이상하게 보일 수 있습니다.

글꼴 멋진 아이콘 색상 변경

마지막으로 Font Awesome 아이콘의 색상을 변경하는 방법을 보여 드리겠습니다. 불행히도 이에 대한 기본 제공 수정자가 없습니다. 대신 사용자 정의 CSS를 사용해야 합니다.

하지만 걱정하지 마십시오. 매우 간단합니다.

이 작은 코드만 있으면 됩니다.

.fa-NAME {
color: COLOR;
}

여기서 fa-NAME은 아이콘의 실제 이름이고 COLOR는 변경하려는 색상입니다.

이전 예의 다운로드 아이콘을 계속 사용하려면 다음과 같이 빨간색으로 바꿉니다.

모양 → 사용자 정의 → 추가 CSS 로 이동하여 사용자 정의 CSS를 쉽게 추가할 수 있습니다.

정리하기

Font Awesome 아이콘을 설정하는 데 몇 분 정도 걸릴 수 있습니다. 그러나 일단 설치하면 영구적입니다. 그 다음부터는 개별 Font Awesome 아이콘을 삽입하고 스타일을 지정하기 위해 위의 단계를 따르기만 하면 됩니다.

주의하십시오. 수동 방법을 사용하는 경우 주기적으로 이동하여 최신 버전에 대한 최신 정보를 유지하기 위해 스타일시트에 대한 링크를 업데이트해야 합니다.