Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기

HTML 문서에 연결하는 방법

Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다.

Script VS CSS

Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다.

  • SVG with JS
    Modern, easy and powerful with new features and the most backwards compatiblity
  • Web Fonts with CSS
    The classic way of using Font Awesome icons - great for die hards and older browsers

Script 방식은 IE 10 이상을 지원하는데, IE 10에서는 약간의 문제가 있습니다.

IE 10 does not support MutationObserver technology. The JavaScript library for Font Awesome relies on this in order to watch for changes made in the page.

CSS 방식은 IE 9 이상을 지원합니다.

만약 IE 8을 지원해야 한다면 Font Awesome 4를, IE 7을 지원해야 한다면 Font Awesome 3을 사용해야 합니다. 

CDN VS Local

CDN을 이용하는 게 편하기는 하지만, 한국에서는 속도가 느릴 수 있습니다. 속도가 중요하다면 Font Awesome을 다운로드 받아 서버에 올려놓고 사용합니다.

스크립트 이용하는 방법

CDN을 이용한다면 다음 코드를 HTML 문서에 추가합니다.(숫자는 현재 버전에 맞게 수정하세요.)

<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>

다운로드 받은 파일을 사용한다면, js 폴더에 있는 all.min.js 또는 all.js를 연결합니다.

<script defer src="js/all.min.js"></script>

여기에서 원하는 아이콘을 찾고 클릭합니다.

코드를 복사합니다.

그 코드를 HTML 문서에 넣습니다. CSS로 크기, 색, 모양 등을 꾸밀 수 있습니다.

다음은 CDN을 이용하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Font Awesome</title>
    <style>
      .a {
        text-align: center;
        font-size: 80px;
        color: #F44336;
      }
    </style>
    <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
  </head>
  <body>
    <h1><i class="fas fa-camera-retro"></i></h1>
    <h1 class="a"><i class="fas fa-camera-retro"></i></h1>
  </body>
</html>

CSS 이용하는 방법

CDN을 이용한다면 다음 코드를 HTML 문서에 추가합니다.(숫자는 현재 버전에 맞게 수정하세요.)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

다운로드 받은 파일을 사용한다면, css 폴더에 있는 all.min.css 또는 all.css를 연결합니다.

<link rel="stylesheet" href="css/all.min.css">

다음은 CDN을 이용하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
    <style>
      .a {
        text-align: center;
        font-size: 80px;
        color: #F44336;
      }
    </style>
  </head>
  <body>
    <h1><i class="fas fa-camera-retro"></i></h1>
    <h1 class="a"><i class="fas fa-camera-retro"></i></h1>
  </body>
</html>

Related Posts

Font Awesome 5 / TIP / 아이콘으로 체크박스 디자인하기

Font Awesome 5 / TIP / 아이콘으로 체크박스 디자인하기

체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다. 이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다. 체크박스와 라벨 만들기 체크박스와 라벨을 만듭니다. 라벨은 두 개 만들고, 첫 번째 라벨에는 내용을 넣지 않습니다. <!doctype html> <html lang="ko"> <head> <meta ...

Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기

Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기

HTML 문서에 연결하는 방법 Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. Script VS CSS Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다. SVG with JS Modern, easy and powerful with new features and the most backwards compatiblity Web Fonts with CSS The classic ...

Font Awesome 4 / HTML 문서에 연결하고 아이콘 넣기

Font Awesome 4 / HTML 문서에 연결하고 아이콘 넣기

HTML 문서에 연결하기 Font Awesome은 CDN을 이용할 수도 있고 다운로드 받아 사용할 수도 있습니다. 간편한 방법은 CDN이지만, 속도가 느리다면 다운로드 받아 사용합니다. CDN 이용하기 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 4.7.0은 Font Awesome 버전으로, 숫자를 변경해서 원하는 버전을 사용할 수 있습니다. 다운로드 받아 사용하기 Font Awesome v4.7.0 홈페이지에서 다운로드를 클릭합니다. 새 창이 뜨면 ...

Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기

Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기

Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다. .fa-angle-right:before {   content: "\f105"; } 기본 마커 없애기 순서 ...