아이콘 글꼴이란 무엇입니까? (그리고 사용법)

아이콘 글꼴은 일반적인 CSS 문제에 대한 대중적인 솔루션입니다. 효율적이고 빠른 로딩 방식으로 웹 아이콘을 웹 사이트 디자인에 통합하는 방법.

아이콘 글꼴을 쉽게 선택하고 사용할 수 있도록 다양한 서비스가 제공되므로 처음부터 직접 만들 필요가 없습니다. 아이콘 글꼴은 인터넷 전체에 있습니다.

그러나 아이콘 글꼴은 정확히 무엇입니까? 어떻게 사용합니까? 아이콘 글꼴에 대해 알아야 할 모든 것에 대한 안내서가 있습니다.

폰트 탐색

아이콘 글꼴이란 무엇입니까?

아이콘 글꼴은 레터 폼이 아닌 작은 이미지를 사용하는 서체입니다. 유형과 마찬가지로 각 문자는 확장 가능하며 CSS를 사용하여 수정할 수 있습니다.

아이콘 글꼴을 사용하는 주된 이유는 크기, 색상, 모양을 쉽게 변경할 수 있기 때문입니다. 아이콘 글꼴은 본질적으로 투명하므로 어떤 색상이나 배경 유형에도 적용 할 수 있으며 획을 추가하거나 아이콘의 불투명도를 변경할 수 있습니다.

CSS로 완료되었으므로 디자인에서 아이콘의 각 새 인스턴스에 대해 고유 한 이미지를 만들 필요가 없습니다. (이것은 웹 사이트와 코드를 가볍게 유지하는데 좋습니다.)

아이콘 글꼴은 벡터 이미지이므로 확장 가능합니다. 다른 글꼴과 마찬가지로 원하는만큼 크거나 작게 만들 수 있습니다. 아이콘 글꼴 만 아트 요소로 사용하거나 다른 텍스트 필드에 흩어져 있습니다.

가장 인기 있고 잘 알려진 아이콘 글꼴 라이브러리는 Font Awesome입니다. 1 억 개가 넘는 웹 사이트에 사용되며 강력한 아이콘 옵션 모음이 포함되어 있습니다. Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React 및 Ember를 포함한 모든 인기있는 도구와 함께 작동합니다.

잘 알려진 몇 가지 다른 글꼴 아이콘도 있습니다.

• 플랫 아이콘
• 이코 폰트
• 폰텔로
• 아이코 문

아이콘 글꼴 사용의 장단점

그렇다면 아이콘 글꼴을 사용하거나 피하는 이유는 무엇입니까? 다음은 이러한 스타일의 아트 요소로 작업 할 때의 장단점입니다.

아이콘 글꼴 사용의 장점

• CSS에 적절한 클래스가 있으면 아이콘 크기를 쉽게 조정할 수 있습니다.
• 작은 문제로 큰 아이콘 라이브러리를 얻을 수 있습니다
• 웹 사이트를 구축하는 데 사용한 것과 상관없이 아이콘 속성을 쉽게 변경할 수 있습니다.
• 웹 사이트의 모든 페이지에 아이콘을 쉽게 추가 할 수 있습니다 (아이콘 이름 만 삽입하면됩니다)
• 모든 종류의 스타일에서 선택할 수있는 수천 개의 아이콘이 있습니다
• WordPress 사용자는 간단한 플러그인을 사용하거나 글꼴 디렉토리를 코드 (거의 모든 인터페이스)에 복사하여 아이콘 글꼴을 추가 할 수 있습니다.
• 수퍼 사용자 정의가 필요한 경우 고유 한 아이콘 글꼴을 만들 수 있습니다

아이콘 글꼴 사용의 단점

• 아이콘은 단일 색상 또는 색상 그라디언트입니다 (대부분의 경우). 더 많은 프리미엄 팩이 이것을 변경하고 있습니다.
• 아이콘 글꼴이로드되지 않으면 대체 대체가 없습니다
• 전체 아이콘 세트가 필요하지 않을 수 있습니다
• 일부 스크린 리더는 아이콘 글꼴로 수행 할 작업을 모릅니다
• 필요에 맞는 팩을 찾지 못할 수도 있습니다

아이콘 글꼴을 사용하는 방법

아이콘 글꼴 사용 지침은 선택한 공급자에 따라 약간 다를 수 있지만 기본 개념은 동일합니다.

일반적으로 세 가지 옵션이 있습니다 (자체 하드 코딩을 조금 더 계획하지 않는 한).

• 모든 것을 설치하는 플러그인을 사용하면 사용하려는 아이콘 만 호출하면됩니다. (슈퍼 쉬워요!)
• CMS 또는 웹 사이트 빌더에서 내장 글꼴 아이콘을 사용하십시오. 이것은 사용자 정의 사이트가 없거나 특정 유형의 글꼴 아이콘이 필요하거나 원하지 않는 경우에 효과적입니다. 대부분의 웹 사이트 제작자는 "즉시 사용 가능한"제품을 제공합니다.
• 외부 호스팅 아이콘 글꼴에 수동으로 연결합니다. (플러그인 사용의 더 복잡한 버전입니다.)

아이콘 글꼴 및 SVG

더 큰 논쟁은 웹 사이트에 작은 이미지를 삽입 할 목적으로 SVG 글꼴 이미지와 아이콘 글꼴 중 어느 것을 사용해야하는지의 여부로 바뀌고 있습니다. 두 옵션 모두 똑같이 실행 가능하며 개인적인 취향과 관련이 있습니다.

아이콘 글꼴은 일반적으로 대부분의 사람들이 쉽게 찾고 사용할 수 있습니다. SVG 아이콘은 더 많은 디자인 제어가 필요한 사용자가 선호합니다.

SVG (확장 가능한 벡터 형식) 파일은 디자인에 약간의 유연성을 제공 할 수 있습니다. (단 하나의 색상으로 제한되지는 않습니다). 작고 확장 가능한 파일을 미디어 디렉토리에 바로 업로드 할 수 있으며 작업하기 쉽습니다. 소수의 아이콘 만 필요하고 라이브러리를 다루고 싶지 않은 경우이 옵션이 좋습니다.

SVG는 더 많은 색상과 애니메이션을 추가 할 수있는 기능으로 더욱 유연합니다.

아이콘 글꼴은 캐시되어 있기 때문에 장기적으로 더 빨리로드 될 수 있습니다. 그러나 그 차이는 아주 작을 수 있습니다.

아이콘 위치 지정 글꼴은 크기, 줄 간격 및 세로 맞춤과 같은 일반적인 글꼴 규칙을 따르기 때문에 약간 까다로울 수 있습니다. 이것만으로 대부분의 사람들이 아이콘 글꼴을 사용하는 이유는 스스로 만들려고하지 않고 기존 공급자를 선택하는 것입니다.

SVG에는 아이콘 글꼴보다 액세스하기 쉬운 요소가 포함될 수 있습니다.이 글꼴은 화면 판독기에 문자 문자로 표시 될 수 있습니다.

아이콘 글꼴은 일반적으로 대부분의 사람들이 쉽게 찾고 사용할 수 있습니다. 라이브러리는 일반적으로 사용 가능하며 이해하기 어렵지 않습니다. SVG 아이콘은 더 많은 디자인 제어 및 사용자 정의 옵션을 원하는 사용자가 선호합니다.

두 옵션 모두 일반적으로 사용되며 대부분의 경우 잘 작동합니다. 하나를 선택하는 것은 가장 편한 것과 디자인 미학 및 사용자 인터페이스와 일치하는 것과 관련이 있습니다.

결론

아이콘 글꼴이 널리 사용되는 이유 중 하나는 다양하고 사용하기 쉽다는 것입니다. 대부분의 콘텐츠 관리 시스템을 몇 번 클릭하여 설치할 수있는 확장 가능한 형식 덕분에 거의 모든 사람이 아이콘 글꼴을 빠르게 사용할 수 있습니다.

아이콘 글꼴의 실질적인 이점은 요소가 CSS를 사용하고 독립적 인 이미지 파일이 아니라는 것입니다. 이것은 벡터 형식으로 빠르게로드되는 요소가 포함 된 웹 사이트를 만드는 데 유용합니다 (나중에 크기를 변경해야하는 경우에 좋습니다).