사람들은 자연스럽게 외모에 끌린다. 사이트 웹 당신이 공유하는 서면 콘텐츠에 매력을 느끼는 만큼. 사실 에 따르면 제프 Bullas ", 이미지가있는 기사는 이미지가없는 기사보다 조회수가 94 % 더 많습니다.

저에게 물어 보면 페이지 뷰가 엄청나게 증가한 것입니다.

그리고 그 이유는 정확히 무엇인가?

콘텐츠 전체에 기사와 관련된 고품질 이미지 몇 개를 추가하기 만하면됩니다.

하지만 당신의 사진은 어떻습니까? 사이트 웹 스크린샷과 사진을 뛰어넘는 것입니까? 관심을 끌 뿐만 아니라 유용한 기능을 제공하는 이미지는 어떻습니까?

예, 저는 아이콘에 대해 이야기하고 있습니다. 소셜 미디어에서 공유를 장려하고 사업주의 연락처 페이지를 설명하고 몇 가지 사례를 설명하기 위해 웹 사이트에서 발견되는 작은 이미지를 알고 있습니다. 사용.

이 사이트에서 아이디어를 가져왔기 때문에 방문자 웹사이트의 이미지에 매력을 느꼈을 뿐만 아니라 이미지와 상호작용하는 경향이 있었기 때문에 사람들은 이미지를 웹사이트에 추가하기 시작했습니다.

그러나 기술이 발전함에 따라 항상 그렇듯이 전통적인 이미지 아이콘은 웹 사이트의 이미지 솔루션으로 흔들 리기 시작했습니다. 이는 페이지를 훨씬 무겁게 만들어 느리게 만들기 때문이지만 무엇보다도이 솔루션이 항상 모바일에 적합하지는 않았습니다.

그러나 해결책은 아이콘 글꼴입니다.

오늘은 아이콘 글꼴이 무엇인지, 그리고 WordPress 사이트에서 사용할 때의 이점에 대해 말씀 드리겠습니다. 또한 인기있는 플러그인 "을 사용하여 WordPress 사이트에 아이콘 글꼴을 추가하는 방법을 보여 드리겠습니다. 더 나은 글꼴 굉장에게 ".

이제 시작하겠습니다.

아이콘 글꼴은 무엇이며 왜 사용해야합니까?

아이콘 글꼴은 정확히 아이콘에 내장 된 글꼴입니다. 실제로 아이콘 글꼴 또는 " 메이크업 아이콘 "전통적인 글꼴 및 텍스트와 관련된 문자 및 숫자가 아닌 문자 또는 기호 만 표시하는 글꼴로 설명 할 수 있습니다.

Wordpress 아이콘 글꼴아이콘 글꼴은 사이트에서 일반적으로 사용되는 기호를 표시하는 데 사용됩니다. 예를 들어 소셜 미디어 버튼, 장바구니, 다운로드 버튼 및 탐색 버튼은 사이트에 작은 대화 형 이미지를 표시하는 아이콘의 예입니다.

웹 사이트의 Fonticone

아이콘 글꼴을 사용하는 이유는 무엇입니까?

이미지 아이콘은 과거에 많은 사이트 소유자에게 잘 작동했습니다. 그러나 탐색 규칙, 유용성 및 디자인이 발전함에 따라 아이콘 글꼴은 대화형 이미지를 표시하는 데 가장 적합한 솔루션이 되었습니다. 웹 사이트.

아이콘 글꼴이 최선의 선택 인 이유 몇 가지를 살펴 보겠습니다.

  • 품질 손실없이 쉽게 확장 가능
  • 색상 및 음영 측면에서 사용자 정의 가능
  • 100 %의 응답을
  • CSS 이미지 스프라이트처럼 작동하지만 텍스트처럼 작동합니다.
  • 사용하기 쉽다.
  • 지원되는 브라우저
  • 불투명도, 회전 등 사용자 지정
  • 크기 작은 파일
  • 속도 나 웹 사이트의 성능을 희생하지 마십시오

보시다시피 이미지 아이콘이 아닌 웹 사이트에서 아이콘 글꼴을 사용하려는 몇 가지 이유가 있습니다.

플러그인을 사용하여 사이트에 글꼴 아이콘 설치

Better Font Awesome은 워드 프레스 플러그인 최신 버전의 Font Awesome을 WordPress 프로젝트에 자동으로 통합할 수 있는 프리웨어입니다. 또한 CSS, 단축 코드 및 TinyMCE 단축 코드 생성기가 함께 제공됩니다.

이 플러그인에는 사이트 소유자를위한 다양한 유용한 기능이 있습니다.

  • 최신 버전의 정기 업데이트
  • 짧은 코드를 변경하지 않고 Font Awesome 버전 간 전환 가능
  • 단축 코드를 포함하여 다른 인기있는 글꼴 플러그인 지원
  • jsDelivr CDN 발행

1 단계 : 더 멋진 글꼴 설치 및 활성화

시작하려면 다른 플러그인과 마찬가지로 WordPress 대시 보드를 통해 "Better Font Awesome"플러그인을 설치하고 활성화하십시오.

먼저 " 플러그인> 새로 추가 그리고 " 더 나은 글꼴 굉장에게 ".

더 나은 글꼴 멋진 플러그인 설치 및 활성화

그런 다음 " 지금 설치 »그리고 클릭« 활성화 ".

플러그인이 활성화되면 링크가 추가됩니다더 나은 글꼴 굉장에게WordPress 대시 보드의 설정 메뉴에서

더 나은 글꼴 멋진 플러그인 새 메뉴 항목

2 단계 : 플러그인 설정 구성

플러그인을 구성하려면« 더 나은 글꼴 굉장에게 ", 메뉴 항목을 클릭하여 시작" 더 나은 글꼴 굉장에게 설정에서 그렇게하면 다음과 유사한 화면이 나타납니다.

더 나은 글꼴 멋진 플러그인 구성 설정여기서 다음을 수행 할 수 있습니다 :

  • 버전: 사용하려는 "Better Font Awesome"버전을 선택합니다.
  • 축소 된 CSS 사용: 축소 된 CSS 버전을 사용하려면이 상자를 선택하십시오.
  • 기존 인쇄 글꼴 삭제: 다른 플러그인 및 테마에 의해 추가 된 코딩 된 스 니펫 및 단축 코드를 제거하려면이 상자를 선택하십시오.
  • 관리자 리뷰 숨기기: API 및 CDN 오류가 발생할 때 나타나는 기본 관리자 경고를 숨 깁니다.

Better Font Awesome 옵션의 최소량 외에도 사이트에 아이콘을 추가하는 방법을 설명하는 작은 "사용법"섹션이 있습니다.

더 나은 글꼴 멋진 플러그인 사용

3 단계 : 웹 사이트에 아이콘 추가

단축 코드, HTML 또는 TinyMCE를 통해 "Better Font Awesome"을 사용하여 웹 사이트에 아이콘을 추가하는 세 가지 쉬운 방법이 있습니다.

# 1. 단축 코드를 사용하여 아이콘 추가

단축 코드를 사용하여 웹 사이트에 아이콘을 추가하려면 먼저 " 멋진 글꼴 사용할 수있는 사용 가능한 아이콘의 전체 목록을 보려면.

여기에서 원하는 아이콘을 검색 할 수 있습니다. 예를 들어 "이메일"아이콘을 원하면 해당 키워드를 검색하고 클릭하여 사용할 아이콘을 선택하면됩니다.

fontawesome에서 아이콘을 찾으십시오.추가하려는 아이콘을 클릭하면 크기가 다른 아이콘 이미지와 작은 코드 블록을 보여주는 화면이 표시됩니다.

모든 크기의 글꼴 아이콘코드 블록을 복사하고 "텍스트 편집기"탭을 사용하여 웹 사이트의 아무 곳에 나 붙여 넣으십시오. 다음은 웹 사이트에서 편집기가 표시되는 모습입니다.

워드 프레스에 아이콘이있는 코드 편집기워드 프레스에 아이콘이있는 코드 편집기결국, 다음은 방문자 그들이 귀하의 사이트에 액세스할 때 볼 수 있습니다:

Wordpress 아이콘 포스터 결과
# 2. HTML 코드를 사용하여 아이콘 추가

섹션에서 본 것처럼 " 용도 HTML 코드를 사용하여 웹 사이트에 아이콘을 삽입 할 수 있습니다. 그러나 플러그인 개발자는 HTML을 사용하려면 버전 별 접두사가 필요하다는 점을 고려합니다.

그렇기 때문에 대신 단축 코드를 사용하도록 권장합니다. 그러나 HTML 코드를 사용하려는 경우 Font Awesome에는 여기에 유용한 정보.

# 3. TinyMCE를 사용하여 아이콘 추가

사이트에 아이콘을 추가하는 가장 쉬운 방법 일 것입니다. "비주얼 편집기"모드에서 삽입 아이콘을 클릭하십시오. 거기에서 사용 가능한 아이콘 옵션을 스크롤하거나 검색 기능을 사용하여 결과 범위를 좁 힙니다.

Wordpress 비주얼 편집기 아이콘 검색 버튼

원하는 아이콘을 찾으면 클릭하십시오. 단축 코드 생성기는 게시물 또는 페이지에 필요한 정보를 자동으로 입력합니다.

사이트에서 아이콘을 맞춤 설정하는 방법을 배우려면 " 멋진 글꼴 ".