기본 아이콘
글꼴 최고 아이콘을 사용하려면 내부에 다음 줄을 추가 <head> HTML 페이지의 섹션 :
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
참고 : 다운로드 또는 설치가 필요하지 않습니다!
당신은 접두사를 사용하여 글꼴 최고 아이콘을 배치 fa 와 아이콘의 이름을.
예
다음 코드 :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>결과 :
편집 폰트 인라인 요소와 함께 사용하도록 설계된다. 은 <i> 과 <span> 요소는 널리 아이콘에 사용됩니다.
또한 아이콘의 컨테이너 아이콘 변경 글꼴 크기 나 색상을 변경하면 있습니다. 같은 일이 그림자와 CSS를 사용하여 상속되는 다른 용도로 간다.
큰 아이콘
fa-lg (33% increase) , fa-2x , fa-3x , fa-4x , 또는 fa-5x 클래스는 아이콘이 자신의 컨테이너를 기준으로 크기를 증가하는 데 사용됩니다.
예
다음 코드 :
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
결과 :
Tip: 당신의 아이콘이 상단과 하단에 잘려지고있는 경우, 줄 높이를 증가시킨다.
목록 아이콘
fa-ul 및 fa-li 클래스는 정렬되지 않은 목록에 기본 글 머리 기호를 대체하는 데 사용됩니다.
예
다음 코드 :
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>결과 :
- List icons
- List icons
- List icons
경계하고 뽑아 아이콘
fa-border , fa-pull-right 또는 fa-pull-left 클래스는 풀 따옴표 또는 문서 아이콘에 사용됩니다.
예
다음 코드 :
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.결과 :
애니메이션 아이콘
fa-spin 클래스는 회전하는 아이콘을 취득하고, fa-pulse 클래스는 8 단계 회전하는 아이콘을 가져옵니다.
예
다음 코드 :
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i
class="fa fa-spinner fa-pulse"></i>
결과 :
참고 : IE8 및 IE9는 CSS3 애니메이션을 지원하지 않습니다.
회전 및 뒤집혀 아이콘
fa-rotate-* 와 fa-flip-* 클래스가 회전 아이콘을 반전하는 데 사용됩니다.
예
다음 코드 :
<i class="fa fa-shield"></i>
<i class="fa fa-shield
fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield
fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>결과 :
누적 된 아이콘
여러 아이콘을 스택하려면 사용 fa-stack 상위에 클래스의 fa-stack-1x 정기적 크기의 아이콘 클래스 및 fa-stack-2x 더 큰 아이콘.
fa-inverse 클래스는 다른 색상 아이콘으로 사용될 수있다. 또한, 상기 크기를 제어하기 위해 부모에게 큰 아이콘 클래스를 추가 할 수있다.
예
다음 코드 :
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin
fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter
fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera
fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"
style="color:red;"></i>
</span>
fa-ban on fa-camera결과 :
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
고정 폭 아이콘
fa-fw 클래스는 고정 폭 아이콘을 설정하는 데 사용됩니다. 다른 아이콘의 폭이 정렬을 던질 때이 클래스가 유용합니다. 부트 스트랩의 navlists 목록 그룹에 특히 유용합니다.
예
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> »그에게 자신을보십시오 부트 스트랩
글꼴 최고는 모든 부트 스트랩 구성 요소와 훌륭한 작품.