WordPress 웹 사이트에서 Font Awesome을 사용하는 방법
게시 됨: 2019-02-14벡터 아이콘을 사용할지 아니면 정적 이미지를 사용할지 선택하는 경우 벡터를 사용하는 것이 좋습니다. 작고 빠르게 로드할 수 있으며 해상도 손실 없이 모든 크기로 확장할 수 있습니다. Font Awesome은 웹사이트에서 사용할 수 있는 뛰어난 벡터 아이콘 라이브러리이며, 필요한 거의 모든 모양이나 브랜드를 갖고 있습니다. 그리고 무엇보다도? 무료입니다. 무엇보다 두 번째로 쉽습니다.
YouTube 채널 구독
글꼴 멋진 WordPress 아이콘
WordPress 사이트에서 Font Awesome 라이브러리를 사용하는 것은 상대적으로 어렵지 않습니다. 이 간단한 단계를 따르면 페이지 로드 시간을 줄이고 이 아이콘을 작업의 일부로 사용하여 정말 깨끗하고 선명한 디자인을 만들 수 있습니다.
한 가지 기억해야 할 점은 (대부분의 경우) Font Awesome 아이콘이 실제 글꼴로 사이트에 제공된다는 것입니다. 따라서 이름이 Font Awesome입니다. @font-face 및 Font Awesome font-family 를 통해 CSS를 사용하여 일반적으로 글꼴 문자를 사용할 수 있는 모든 방식으로 스타일을 지정하고 조작할 수 있습니다.
그 때문에 각 개별 브라우저나 뷰포트의 크기나 간격에 대해 걱정할 필요가 없습니다. 그것이 훌륭하게 들리면 그것은 때문입니다. 방법은 다음과 같습니다.
Font Awesome 설치
Font Awesome을 수동으로 설치하고 사용하는 방법이 있지만 WordPress 사용자를 위한 더 좋은 방법이 있습니다. FA의 훌륭한 사람들이 공식 Font Awesome WordPress 플러그인을 출시했으며 아름답게 작동합니다.
플러그인을 설치하고 활성화하면 이제 [[icon name]] 단축 코드와 HTML 스니펫에 액세스할 수 있습니다. 편리한 FA 아이콘 목록을 유지하는 한 어떤 아이콘이 필요한지 정확히 알 수 있습니다. 플러그인의 설정 페이지( Settings – Font Awesome 아래에 있음)에서 기본적으로 어떻게 설정되어 있는지 확인할 수 있습니다. 일반적으로 보관하고 사용하는 것이 좋습니다. 대부분의 사람들은 다른 것이 필요하지 않습니다.
방법 옵션은 아마도 대부분의 사람들에게 가장 중요할 것입니다. Webfont 또는 SVG 간에 전환할 수 있습니다. SVG가 더 많은 기능과 기능(예: 전원 변환 및 마스킹)을 제공하지만 Font Awesome CDN은 아이콘을 글꼴이 아닌 SVG 파일로 제공합니다. 어떤 면에서는 더 낫지만 SVG는 많은 브라우저에서 인식되지 않으며 WordPress도 SVG 이미지와 항상 잘 작동하지 않습니다. 따라서 웹폰트 버전으로 안전하게 플레이하는 것이 좋습니다.
Font Awesome도 마찬가지 입니다. 차이점이 확실하지 않거나 SVG를 사용해야 하는 이유를 모르는 경우 기본 webfont 방법을 사용하는 것이 가장 쉬울 것입니다.
WordPress 사이트에서 Font Awesome 아이콘을 사용하는 방법은 간단합니다. 아이콘을 표시하려는 곳에 <i class=”fab fa-wordpress”></i> 를 추가하기만 하면 됩니다. 어떤 이름을 넣을지 아이콘 라이브러리를 확인하십시오.
참고: 플러그인의 단축 코드는 적중률입니다. 일부 아이콘은 완벽하게 렌더링되지만 다른 아이콘은 공백으로 표시됩니다. 단축 코드가 작동하지 않는 한 HTML 삽입을 고수하는 것이 좋습니다. 카메라 아이콘은 렌더링되지만 렌더링되지 않는 위의 WordPress 예제의 예는 아래를 참조하십시오.
그리고 당신은 끝났습니다. Font Awesome WordPress 플러그인은 테마나 파일에 들어가 필요한 코드를 삽입하는 데 익숙하지 않은 사람들에게 적합합니다. 그러나 그렇게 하는 것이 편하다면 다음 지침에 따라 사이트에서 Font Awesome 아이콘을 얻을 수 있습니다.
Font Awesome 아이콘 수동 설치
가장 먼저 해야 할 일은 Font Awesome 웹사이트로 이동하는 것입니다. 거기에서 무료 사용 시작 버튼을 클릭하십시오. 트래픽이 많은 사이트가 있고 엔터프라이즈 솔루션이 필요한 사람들을 위해 유료 플랜을 제공하지만 일반 대중은 무료 버전을 사용할 수 있습니다. Pro 플랜에서는 1,500개의 아이콘을 무료로 제공하고 5,000개 이상의 변형을 제공합니다.
다음 단계는 단순히 복사/붙여넣기입니다. 그러나 이전에 논의한 것처럼 webfont 옵션을 강조 표시했는지 확인하고 싶을 것입니다.
대부분의 테마에는 사이트의 <head> 에 자동으로 코드를 삽입할 수 있는 위치가 있습니다. 예를 들어 Divi의 경우 테마 옵션 – 통합 으로 이동하여 이 코드를 블로그 헤드에 코드 추가 필드에 붙여넣습니다.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
저장을 누르면 위에서 했던 것처럼 원하는 아이콘을 포함할 수 있습니다. 단, 이렇게 하면 단축 코드 에 액세스 할 수 없습니다 .
테마가 코드 통합을 지원하지 않는 경우
테마에서 이와 같은 지점을 찾을 수 없는 경우 수동으로 수행하는 것만큼이나 쉽습니다. 그러나 그렇게 하려면 테마의 핵심 파일을 파헤쳐야 하지만 복사/붙여넣기가 매우 빠르고 (일반적으로) 꽤 안전합니다. WP 대시보드에서 모양 – 편집기 로 이동하여 header.php 파일을 찾습니다.
</head> 가 쓰여진 줄을 찾아 그 앞에 Font Awesome에서 동일한 코드를 붙여넣어야 합니다. 파일 업데이트 를 누르면 FA 아이콘을 즉시 사용할 수 있습니다. 다시 말하지만, 이 방법으로 Font Awesome을 설치하면 단축 코드가 표시되지 않습니다.
또한 테마 파일을 편집할 때마다 자식 테마를 사용하고 싶어한다는 점에 유의하세요. 이렇게 하면 테마가 업데이트될 때 변경 사항을 덮어쓰는 것을 방지할 수 있습니다.
추가 설치 옵션
그리고 Font Awesome에 대한 더 구체적인 요구 사항이 있는 경우 라이브러리에 액세스할 수 있는 다양한 방법을 제공합니다. NPM 및 Yarn 설치에서 Sketch 및 React 통합에 이르기까지 WordPress보다 필요한 경우 수많은 옵션이 있습니다.
글꼴 멋진 아이콘 스타일링
이제 설치가 완료되었으므로 아이콘을 팝업으로 만들 차례입니다. 각 아이콘은 CSS 클래스에 의해 관리되기 때문에 CSS를 사용하여 이 작업을 수행할 수 있습니다. 가장 자주 사용되는 두 가지 스타일은 색상과 크기입니다. 스타일시트에 CSS 스타일을 포함하거나 인라인으로 수행할 수 있습니다. 일반적으로 인라인 스타일을 사용하는 것이 좋습니다. 이러한 아이콘은 사이트 전체에서 보편적이지 않기 때문입니다.
Font Awesome 웹사이트에는 이를 수행하는 방법에 대한 예제가 있습니다. 그들은 이글루 아이콘과 특정 크기에 대한 fa-xs 또는 fa-xl 또는 fa-2x 와 같은 추가 클래스를 사용하여 크기를 표시합니다.
또한 특정 크기에 상대적인 아이콘이 필요하고 절대 값이 작동하지 않는 경우 자체 <div> 에 배치하여 제약 조건 내에서 작동하도록 할 수 있습니다.
<div style="font-size: 0.5rem;"> <i class="fas fa-igloo fa-10x"></i> </div>
마무리
그리고 그게 다야! 대단해, 그렇지? Font Awesome WordPress 플러그인을 사용하든 수동으로 코드를 삽입하든 상관없이 사이트를 시작하고 실행하는 데 몇 단계만 거치면 됩니다. Font Awesome이 인기 있는 데는 이유가 있으며 그 중 일부는 사용 편의성 때문입니다. 그러니 나가서 멋진 일을 하십시오!
Font Awesome 아이콘을 사용하는 가장 좋아하는 방법은 무엇입니까?
Font Awesome의 기사 특집 이미지 제공