글꼴 굉장 : 완전한 라이브러리 가이드

글꼴 굉장 : 완전한 라이브러리 가이드

무료 아이콘 글꼴 굉장히 : 그것이 무엇인지 그리고 그것이 무엇을 위해 사용되는 것입니다. 아이콘을 사이트에 연결하는 방법. 도서관의 장점과 단점.

폰트 멋진 이유는 무엇 이며이 사이트에서 사용 된 것입니다. 도서관 혜택.

글꼴 굉장 아이콘 세트 : 궁극적 인 가이드

글꼴 멋진 글꼴 및 CSS 및 덜 기반의 글꼴 및 아이콘 세트입니다. 이 도구를 사용하면 모든 종류의 아이콘을 사이트에 신속하게 연결할 수 있으므로 설계 및 유용성을 크게 향상시킬 수 있습니다. 몇 줄의 코드를 삽입하는 것이 충분합니다.

Font Awesome은 크기, 색상, 그림자 및 CSS로 수행 할 수있는 기타 모든 것을 쉽게 개인화 할 수있는 확장 가능한 벡터 아이콘을 제공합니다.

Font Awesome Library에는 최고의 제안이 있습니다. 독특한 아이콘으로 프로젝트를 개선합니다. 사실, 이것은 자신의 목적으로 사용할 수있는 모든 종류의 아이콘 세트입니다.

Fontawesome에서 모든 아이콘은 절대적으로 완전히 무료입니다. 라이브러리는 GNU 일반 공중 라이센스에 따라 라이센스가 부여됩니다. 즉, 상업 프로젝트 및 원칙적으로 모든 곳에서 자유롭게 사용할 수 있음을 의미합니다.

세트는 Dave Gandhi가 만들었습니다. 여기에는 무료 소셜 미디어 아이콘, 사용자 인터페이스 향상을위한 아이콘이 포함됩니다.

일반적으로 Font Awesome Font 스크립트는 부트 스트랩 및 부트 스트랩 CDN과 함께 사용됩니다. 글꼴 멋진 것은 인기있는 Google 글꼴 만 두 번째입니다.

그것이 어떻게 작동하는지

주요 기능은 모든 글꼴 멋진 아이콘이 정적 이미지가 아닙니다. 그들은 글꼴 형식입니다. 즉, 이들은 아이콘 글꼴입니다. 예를 들어, 검색 아이콘 또는 소셜 네트워크 로고는 간단한 문자 a, b, c와 동일합니다.

글꼴 굉장한 아이콘은 확장 가능한 벡터를 사용하여 생성됩니다. 따라서 거의 모든 크기로 증가 될 수 있습니다.

사용 가능한 모든 아이콘은 하나의 글꼴 파일에 포함되어 있습니다. 필요한 것은 공식 사이트 에서이 파일을 다운로드하여 스타일로 연결하는 것입니다.

왜 디자이너는 글꼴을 선택합니다

글꼴 멋진 이점은 여러 가지 이점을 가지고 있습니다.

  • 빠른 연결. 공식 웹 사이트에서 특별한 파일을 다운로드하여 CSS 코드에서 경로를 지정하여 연결해야합니다.
  • 유연성과 확장 성. 아이콘은 모든 크기로 확대 될 수 있습니다. 기호는 장치가 허용하는 것처럼 명확합니다. 반응이 좋은 디자인의 시대에 이것은 중요합니다. 그런데 같은 이유로 폰트 멋진 아이콘이 망막 디스플레이에 적합합니다.
  • 양식화. 아이콘은 색상, 크기, 그림자 또는 기타 외부 매개 변수로 쉽게 변경할 수 있습니다. 디자이너는 정규 텍스트 스타일링의 모든 이점을 가져옵니다. 아이콘을 회전 할 수도 있습니다. 예를 들어, 거꾸로 표시되거나 90도 회전하십시오.
  • 사이트의 빠른로드. 모든 아이콘은 하나의 글꼴 파일에 포함되어 있습니다. 그래서 글꼴 멋진 글꼴을로드하려면 하나의 HTTP 요청 만 사용합니다. 이것은 웹 사이트 성능에 좋습니다.
  • 브라우저의 사랑. 글꼴 멋진 브라우저 도구입니다. 글꼴 및 아이콘의 브라우저 호환성에 대해 걱정할 필요가 없습니다. 그들은 모두 잘 지원됩니다. 오래된 IE8조차.
  • 다른 프레임 워크와 호환됩니다. 라이브러리는 주로 부트 스트랩을 위해 생성되었습니다. 그러나 다른 프레임 워크와 잘 작동합니다.
  • 여러 형식입니다. 이 도구는 .eot, .ttf, .woff 및 svg 형식으로 사용할 수 있습니다. 그래서 글꼴 멋진 다른 웹 글꼴과 같은 방식으로 처리됩니다.
  • 자바 스크립트가 필요하지 않습니다. 폰트 멋진 JavaScript가 실행될 필요가 없습니다.

따라서 글꼴 굉장은 레이아웃 시간을 크게 절약하고 웹 사이트를 속도를 높이는 효과적이고 편리한 도구입니다.

글꼴 굉장한 단점

이 도구에는 단점이 있습니다. 다행히도, 그들 중 많은 것은 아닙니다.

첫째, 아이콘은 하나의 색상으로 만 그릴 수 있습니다. 그러나,이 제한은 회피 될 수있다. 예를 들어, 무료 아이콘을 서로 결합하십시오. 또는 CSS 효과를 사용합니다

둘째, 글꼴 멋진 라이브러리에는 너무 많은 아이콘이 포함되어 있으며 모두 하나의 파일에 포함되어 있습니다. 디자이너 또는 레이아웃 디자이너가 두 개의 아이콘을 연결하면 전체 라이브러리를 완전히로드해야합니다. 그리고 이것들은 수십만 개의 여분의 아이콘이 공간을 차지할 것입니다. 그러나 여기에 해결책이 있습니다. 필요한 아이콘 만 포함하는 자체 어셈블리를 만듭니다.

글꼴 멋진 버전 : 5 및 6.

Font Awesome 5는 2017 년 12 월 7 일에 출시되었으며 원래 1278 개의 아이콘이 포함되어 있습니다. 다섯 번째 버전은 무료 (Font Awesome Free) 및 유료 (Font Awesome Pro)의 두 가지 패키지로 제공됩니다. 무료 계획에는 모든 네 번째 버전의 아이콘이 포함되어 있습니다. 아이콘은 SIL Open Font License 1.1, Creative Commons Attribution 4.0 및 MIT에서 사용할 수 있습니다.

SIL 오픈 글꼴 라이센스 (OFL-1.1) | 오픈 소스 이니셔티브
크리에이티브 커먼즈 - 기여 4.0 International - 4.0의 CC
MIT 라이센스 | 오픈 소스 이니셔티브

Font Awesome 6은 2020 년 후반에 릴리스 된 새로운 버전입니다. 새로운 아이콘이 포함되어 있으며 유료 플랜에서만 사용할 수 있습니다.

글꼴 멋진 6 알파도 2021 년에도 있습니다. 이것은 또 다른 새로운 세대의 아이콘 라이브러리입니다. 새로운 아이콘 외에도 버전 6 알파는 새로운 스타일, 새로운 서비스 및 보조 도구를 추가합니다. 사용자는 선주문 할 수 있습니다.

무료 및 유료 계획 : 차이점 및 특징

무료 또는 유료 관세 계획을 위해 아이콘을 다운로드 할 수 있습니다.

무료 계획에는 1600 개 이상의 아이콘과 1 세트가 포함됩니다. 키트는 코드를 추가하지 않고 신속하게 변경할 수있는 아이콘, 스타일 및 설정 모음입니다.

유료 관세 :

  • 7800 개 이상의 아이콘과 20 세트가 포함됩니다.
  • 글꼴 Awesome Pro에 대한 액세스를 제공합니다. 즉, 아이콘은 기본 모바일 응용 프로그램 및 컴퓨터에서 (예 : 단어 텍스트 편집기에서 또는 PowerPoint에서 프레젠테이션을 만들 때) 사용할 수 있습니다.
  • 자신의 아이콘을 업로드 할 수 있습니다. 공식 글꼴 멋진 아이콘 대신 또는 자신의 아이콘을 사용할 수 있습니다. 예를 들어, 이것은 회사 로고를 업로드하는 방법입니다. 기본 요소와 마찬가지로 자신의 아이콘으로 동일한 작업을 수행 할 수 있습니다. 스타일, 크기, 색상 등을 변경할 수 있습니다.

두 버전 모두 영원합니다. 즉, 그들은 한 번 그리고 모두를 위해 제공됩니다.

글꼴을 멋지게 연결하는 방법

우선 공식 웹 사이트에 가서 라이브러리를 다운로드해야합니다. 다운로드 한 아카이브는 포장을 풀고 CSS 및 글꼴 폴더가 사이트 폴더에 복사되어야합니다.

그런 다음 라이브러리 파일의 경로가 헤드 태그간에 지정됩니다. 예 :

웹 사이트에 글꼴 멋진 아이콘을 표시하는 방법. 가장 인기있는 방법 :

1. HTML

가장 쉬운 방법.

공식 웹 사이트 (fontawesome.com/icons?d=gallery)에서 갤러리에 가야하고 원하는 아이콘을 선택해야합니다. 각 아이콘에는 개인 코드가 있습니다. 코드의 올바른 위치에 복사하여 붙여 넣을만큼 충분합니다.

2. CSS를 통해

이렇게하려면 필수 아이콘의 유니 코드뿐만 아니라 의사 요소를 사용하십시오. 같은 갤러리에서 모두 가져갈 수 있습니다. 그러한 코드의 예 : F209.

스타일 파일 항목의 예 :

DIV :: After {Display : Block; 내용 : 'F209'; 글꼴 - 가족 : '굉장한 5 명의 무료';}

결론적으로 : 모든 글꼴 굉장 아이콘

따라서 글꼴 멋진은 웹 사이트에 무료 아이콘을 추가하는 빠르고 편리한 방법입니다. 모든 아이콘은 쉽게 확장 가능하며 사이트를 늦추지 않습니다.





코멘트 (0)

코멘트를 남겨주세요