워드프레스 Icon Class 아이콘 클래스 찾아서 넣기 (플러그인 없음)

워드프레스 빌드를 하다보면, 아이콘을 넣어야하는데 아이콘을 선택하는 항목은 없고

아이콘 클래스값을 입력하라고 하는 경우가 더러 있습니다.

참 난감한게 아이콘의 이미지와 이름도 알려주지 않으면서 아이콘클래스를 입력하라고 하니

도대체 멀 입력해야 할지 모를 수 밖에 없습니다.

 

우선 버튼 두개의 예시를 들어보겠습니다.

 

1.첫번째 좌측 녹색의 버튼

-Icon Class 값을 넣지 않고 SVG를 업로드 하거나, 아이콘 이미지를 보고 선택 하는 버튼

이 경우는 아이콘을 삽입하는데 어려움이 없습니다.

아이콘을 보면서 선택 할 수 있기 때문입니다.

Icon Class 값을 넣지 않고 SVG를 업로드 하거나, 아이콘 이미지를 보고 선택 하는 버튼

 

2.두번째 우측 파란색의 버튼

-아이콘클래스 Icon Class를 입력하여 아이콘을 삽입하는 버튼

문제는 이러한 유형인 경우입니다.

저도 이것 때문에 정말 많이 헤매였는데요.

조금 복잡 할 수 있지만, 어떻게 보면 쉬운 방법을 알려드리겠습니다.

아이콘클래스  Icon Class를 입력하여 아이콘을 삽입하는 버튼

 

3.아이콘 항목 삽입

섹션에 아이콘 블록을 넣어서 원하는 아이콘을 선택하여 주세요.

저는 별을 선택하였습니다.

그리고 저장하고, 빌드 페이지가 아닌 일반 페이지(미리보기)로 돌아갑니다.

 

4.우클릭 - 검사

보기 페이지에서 이미지 위에 마우스를 올리고 우클릭합니다.

그리고 검사를 선택해주세요.

 

 

5.아이콘 클래스 복사

파란색 바탕에 있는 소스코드에서 CLASS를 볼 수 있습니다.

아래의 이미지에서와 같이 <class="fas fa-star">을 볼 수 있는데요

여기에서 알맹이인 fas fa-star 이것만 복사합니다.

이게 class 명입니다.

 

6.아이콘 클래스 붙여 넣기

다시 페이지 수정으로 이동하여, 버튼을 눌려서 아이콘클래스에 아까 복사한 클래스를 붙여 넣습니다.

그러면 아래의 이미지 처럼 별 아이콘이 삽입 된 것을 볼 수 있습니다.

 

복잡해 보이지만, 한번만 해보면 쉽습니다. ^^

저도 이 방법 이외에 아이콘 클래스를 확인하는 방법은 잘 모르겠습니다.

계속 빌드하다보면 또 다른 방법을 찾게 되겠지요? 

오늘도 워드프레스 빌더분들은 기운 충만하게 화이팅 하세요~!!