웹에서 가장 인기있는 아이콘 세트 및 툴킷 인 Font Awesome을 사용하여 웹 사이트에서 벡터 아이콘과 소셜 로고를 제작할 수 있습니다.
스타일 접두사와 아이콘 이름을 사용하여 Font Awesome 아이콘을 어디에나 배치 할 수 있습니다. 아이콘이 특성을 살리고 텍스트 옆에 자연스럽게 표시되도록 만들려고했습니다.
Font Awesome은 인라인 요소와 함께 사용하도록 설계되었으며 프로젝트에서 참조 할 수 있도록 일관된 HTML 요소를 사용하는 것이 좋습니다. 우리는 <i>간결함을 위해 태그를 좋아하고, 요즘 대부분의 사람들 <em></em>이 강조 / 기울임 꼴 의미 텍스트에 사용 하기 때문 입니다. 그것이 당신의 차 한잔이 아니라면, a를 사용하는 <span>것이 더 의미 상 정확합니다.
아이콘을 참조하려면 두 가지 정보를 알아야합니다. 1) 이름, 접두사 fa-( "글꼴 멋지다"라는 의미) 및 2) 사용하려는 스타일의 해당 접두사 **.
<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera --> <i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon --> <span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->
스타일유효성스타일 접두사예표현
| 고체 | 비어 있는 | fas | <i class="fas fa-camera"></i> | |
| 정규병 | 프로 필수 | far | <i class="far fa-camera"></i> | |
| 빛 | 프로 필수 | fal | <i class="fal fa-camera"></i> | |
| 이중 톤 | 프로 필수 | fad | <i class="fad fa-camera"></i> | |
| 브랜드 | 비어 있는 | fab | <i class="fab fa-font-awesome"></i> |
fa접두사 버전에서 사용되지 5. 새 기본값은입니다 fas고체 스타일과 fab브랜드 스타일.
Font Awesome이 처음 구현되었으며 CSS @font-face메서드를 사용하여 렌더링되는 것을 계속 지원하므로 각 스타일은 특정 글꼴 두께에 해당합니다.
스타일유효성@ 글꼴 무게
| 고체 | 무료 플랜 | 900 |
| 정규병 | Pro Plan 필요 | 400 |
| 빛 | Pro Plan 필요 | 300 |
| 이중 톤 | Pro Plan 필요 | 900 |
| 브랜드 | 무료 플랜 | 400 |
를 사용하는 동안 <i>또는 다른 HTML 요소 아이콘을 렌더링하는 가장 인기있는 쉬운 방법입니다, 우리가 할 사용자 정의 작성하여 고급 방법이 CSS 의사 요소를 사용하면 추가 마크 업을 선호하는 경우입니다. 글꼴 두께는 해당 기술과 함께 사용되며 아이콘 스타일을 설정하는 방법입니다.
데스크탑 워크 플로우는 합자를 활용하여 좋아하는 디자인 및 프레젠테이션 앱에 아이콘을 쉽게 삽입 할 수 있도록합니다. SVG + JS 프레임 워크뿐만 아니라 합자 조회 테이블은 추가 파일 공간을 차지하고 성능 문제를 일으킬 수 있습니다. 아이콘 부분 설정에 대한 옵션과 솔루션이있을 때까지 웹 글꼴 + CSS에 대한 합자를 고려하는 것이 불편합니다.
Font Awesome 아이콘은 자동으로 CSS 크기와 색상을 상속받습니다 (아래 예 참조). 즉, 어디에 두든 텍스트 인라인과 조화를 이룹니다. Font Awesome은 너무 독단적이지 않도록 노력하고 컨텍스트에서 제대로 렌더링하는 데 필요한 기본 스타일 규칙 아이콘 만 설정합니다.
<span style="font-size: 3em; color: Tomato;"> <i class="fas fa-camera"></i> </span> <span style="font-size: 48px; color: Dodgerblue;"> <i class="fas fa-camera"></i> </span> <span style="font-size: 3rem;"> <span style="color: Mediumslateblue;"> <i class="fas fa-camera"></i> </span> </span>
아이콘을 참조하는 기본 방법은 간단하고 희망 직선 앞으로 우리가 같은 것들에 대한 지원 수준의 스타일을 제공 한 반면 아이콘 크기 조정 , 정렬 및 목록 아이콘을뿐만 아니라, 회전 및 변환 아이콘.
프로젝트 코드에 자신 만의 CSS 규칙을 추가하여 Font Awesome 아이콘에 자신 만의 스타일을 추가 할 수도 있습니다. 일반적으로 CSS로 제어 할 수있는 모든 것은 색상에서 표시, 정렬에 이르기까지 손에 꼽을 수 있습니다.
몇 가지 다른 방법으로 CSS의 아이콘을 타겟팅하는 것이 좋습니다.
스타일링 케이스권장 선택기
| 모든 아이콘 사용자 지정 스타일 지정 | 모든 아이콘에 일관된 사용자 정의 클래스 추가 (예 : .icon, .[projectprefix]-icon또는 .fa-icon) 사용중인 아이콘 스타일과 일치하는 스타일 클래스를 사용할 수도 있습니다. .fas { ... } .far { ... } .fal { ... } .fad { ... } .fab { ... } |
| 특정 아이콘의 사용자 지정 스타일 지정 | 접두사가 붙은 개별 아이콘 이름을 사용하십시오. .fa- .fa-user { ... } .fa-font-awesome { ... } |
다음은 이러한 선택기를 사용하여 Font Awesome 아이콘에 사용자 정의 색상을 추가하는 간단한 예입니다.
SVG 프레임 워크를 사용할 때 Font Awesome 기반 <i>DOM 요소는 <svg>기본적 으로 새 요소 로 대체 된다는 점을 기억하세요 . CSS 규칙이 올바른 요소를 대상으로하는지 확인하세요.
댓글 영역