Font Awesome 가이드

Font Awesome 아이콘

Font Awesome는 최상의 아이콘 폰트 라이브러리와 CSS 프레임워크입니다.

Font Awesome 폰트는 확장 가능한 벡터 아이콘을 제공하며, 크기, 색상, 그림자 및 CSS를 사용할 수 있는 모든 스타일을 맞출 수 있습니다.

Font Awesome 아이콘을 사용하려면, HTML 페이지의 　부분에 다음 행을 추가하세요:

1、국내 추천 CDN：

<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2、海外 추천 CDN

<link　rel="stylesheet"　href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

주의사항: 다운로드하여 설치하는 것은 권장하지 않으며, 대신 html 문서의 헤더에 CDN 파일을 직접 참조하면 됩니다.
주의사항: 이 튜토리얼에서 사용하는 것은 4.7.0 버전

Font Awesome 아이콘을 배치하려면, 전缀 fa와 아이콘 이름을 사용할 수 있습니다.

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.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>

테스트를 보세요 ‹/›

Font Awesome는 인라인 요소와 함께 사용되기 위해 설계되었습니다. <i>와 <span> 요소는 아이콘에 널리 사용됩니다.

또한 주의해야 할 것은, 아이콘 컨테이너의 폰트 크기나 색상을 변경하면 아이콘도 변경됩니다.

대 아이콘

fa-lg (증가33％)，fa-2x, fa-3x, fa-4x 또는 fa-5x는 그容器的 크기에 비례하여 아이콘 크기를 증가시키기 위해 사용됩니다.

예제

!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

테스트를 보세요 ‹/›

훈계: 아이콘이 상단과 하단에서 잘려지면 라인 높이를 증가시켜 주십시오.

리스트 아이콘

fa-ul과 fa-li 클래스는 불리스트에 기본 프리كس를 대체합니다.

예제

!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

테스트를 보세요 ‹/›

실행된 후 결과는 다음과 같습니다:

경계선과 당겨진 아이콘

fa-border, fa-pull-right 또는 fa-pull-left 클래스는 푸시 인용문이나 기사 아이콘에 사용됩니다.

예제

!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
기본 튜토리얼　--　기본을 잘 배우면 더 멀리 갈 수 있습니다！！！<br>
기본 튜토리얼　--　기본을 잘 배우면 더 멀리 갈 수 있습니다！！！<br>
기본 튜토리얼　--　기본을 잘 배우면 더 멀리 갈 수 있습니다！！！<br>
기본 튜토리얼　--　기본을 잘 배우면 더 멀리 갈 수 있습니다！！！
　
</body>
</html>

테스트를 보세요 ‹/›

실행된 후 결과는 다음과 같습니다:

동적 아이콘

fa-spin 클래스는 아이콘을 회전시킬 수 있습니다. fa-pulse 클래스는 아이콘을 이렇게 회전할 수 있습니다. 8 기간을 주기로 회전합니다.

예제

!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

테스트를 보세요 ‹/›

실행된 후 결과는 다음과 같습니다:

주의: IE8 와 IE9 CSS를 지원하지 않습니다.3 애니메이션.

회전하고 뒤집는 아이콘

fa-rotate-* 와 fa-flip-* 클래스는 아이콘을 회전하고 뒤집을 수 있습니다.

예제

!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

테스트를 보세요 ‹/›

실행된 후 결과는 다음과 같습니다:

쌓인 아이콘

여러 아이콘을 쌓기 위해 부모 요소의 fa를 사용하십시오.-stack 클래스는 fa-stack-1x 클래스는 일반 크기의 아이콘에 사용됩니다. fa-stack-2x는 큰 아이콘에 사용됩니다.

fa-inverse 클래스는 아이콘 색상을 대체할 수 있습니다. 또한 부모 요소에 더 큰 아이콘 클래스를 추가하여 크기를 추가로 제어할 수 있습니다.

예제

!DOCTYPE　html>
<html>
<head>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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" 스타일="color:red;"></i>
</span>
fa-ban on fa-camera
　
</body>
</html>

테스트를 보세요 ‹/›

실행된 후 결과는 다음과 같습니다:

고정 너비 아이콘

fa-fw는 고정된 너비를 설정하는 아이콘을 사용합니다. 다른 아이콘 너비가 정렬에서 벗어나면 이 클래스가 매우 유용합니다. 특히 Bootstrap의 네비게이션 목록과 목록 그룹에 적합합니다.

예제

!DOCTYPE　html>
<html>
<head>
<meta　name="viewport"　content="width=device-width,　initial-scale=1">
<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link　rel="stylesheet"　href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<p>고정된 너비 있음:</p>
<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>
<p>고정된 너비 없음:</p>
<div　class="list-group">
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-home"></i>　Home</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-book"></i>　Library</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-pencil"></i>　Applications</a>
　　<a　href="#"　class="list-group-item"><i　class="fa　fa-cog"></i>　Settings</a>
</div>
　
</body>
</html>

테스트를 보세요 ‹/›

실행된 후 결과는 다음과 같습니다:

Font Awesome 브랜드 아이콘