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>

같은 카테고리의 다른 글
clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트입니다. 홈페이지 : https://clipboardjs.com/ GitHub : https://github.com/zenorocha/clipboard.js/ 사용하기 clipboard.min.js만 HTML에 연결하면 됩니다. 다운로드하여 사용할 수도 있고 CDN을 이용할 수도 있습니다. CDN 리스트는 다음 링크에 있습니다. https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers 기본 문법 다음은 가장 간단하게 구성한 기본 문법입니다. 클래스의 값이 btn인 요소를 클릭하면 data-clipboard-text의 값이 클립보드로 복사됩니다. var clipboard = new ClipboardJS( '.btn' ); ...

웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법

웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법

웹사이트를 만들 때 IE에서 잘 나오는지 확인을 해야 합니다. 다른 웹브라우저는 최신 버전을 사용한다고 가정을 하는데, IE는 윈도우에 종속되어 있어서 최신 버전을 사용할 수 없는 경우가 있거든요. 예를 들어 윈도우 XP는 IE8, 윈도우 Vista는 IE9까지만 사용할 수 있습니다. 각 버전의 IE에서 사이트가 잘 나오는지 테스트하는 방법 중의 하나는 IE 또는 Edge에 ...

SASS / 문법 / 조건문 - @if, @else if, @else

SASS / 문법 / 조건문 - @if, @else if, @else

SASS는 조건문을 지원합니다. 큰 규모의 사이트를 만들 때나 여러 사이트 디자인을 동시에 할 때 유용하게 사용할 수 있습니다. 문법 @if condition1 { A } @else if condition2 { B } @else { C ​} condition1을 만족하면 A를, condition1을 만족하지 않고 condition2를 만족하면 B를, condition1과 condition2를 모두 만족하지 않으면 C를 사용합니다. @else if는 여러 번 사용할 수 ...

SASS / 변수 선언하고 사용하기

SASS / 변수 선언하고 사용하기

CSS는 변수를 사용할 수 없습니다. 반복적으로 사용되는 코드라도 계속 입력을 해야 합니다. 그 코드가 바뀌면 모든 코드를 수정해야 합니다. 하지만, SASS는 변수를 사용할 수 있습니다. 반복적으로 사용되는 코드를 변수에 저장하고 꺼내 쓸 수 있습니다. 수정할 때는 변수의 값만 변경하면 되므로 작업이 간단해집니다. 변수 선언하기 $variable-name: variable-value; 예를 들어 $jb-color: red; 와 같이 하면 jb-color라는 변수에 ...

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 홈페이지에서 다운로드를 클릭합니다. 새 창이 뜨면 ...

SASS / 변환 스타일 - nested, expanded, compact, compressed

SASS / 변환 스타일 - nested, expanded, compact, compressed

변환 스타일 SCSS 파일을 CSS 파일로 변환할 때, 다음 네가지 스타일 중 하나를 선택할 수 있습니다. nested expanded compact compressed 다음과 같은 style.scss 파일을 네가지 스타일로 변환해보겠습니다. ul { font-family: Georgia; color: #333333; li { display: inline-block; } } nested sass style.scss:style.css --style nested 기본값입니다. 스타일 옵션을 붙이지 않아도 nested가 적용됩니다. ul 보다 ul ...

상업적으로도 사용 가능한 무료 텍스트 에디터 모음

상업적으로도 사용 가능한 무료 텍스트 에디터 모음

개인 뿐만 아니라 기업에서도 사용할 수 있는 무료 텍스트 에디터 모음입니다. 라이선스는 바뀔 수 있으니, 사용 시 다시 한 번 확인하시기 바랍니다. 정렬은 알파벳순입니다. AcroEdit Platforms : Windows Atom Platforms : Windows / MAC / Linux Brackets Platforms : Windows / MAC / Linux Notepad ++ Platforms : Windows Visual Studio Code Platforms : Windows / MAC / Linux

cwebp를 이용하여 이미지를 WebP 형식으로 변환하는 방법

JPG, PNG 등의 이미지를 WebP 형식으로 변환하는 방법은 여러 가지가 있습니다. 그 중 구글이 제공하는 cwebp라는 프로그램으로 변환하는 방법을 알아보겠습니다. 다운로드 아래의 링크에서 다운로드를 할 수 있습니다. https://developers.google.com/speed/webp/docs/precompiled?hl=ko Windows용, Linux용, macOS용을 제공하고 있으니, 사용하는 OS에 맞게 다운로드합니다. 여기서는 Windows용으로 설명합니다. 압축 풀기 Windows용 파일을 다운로드한 후 압축을 풉니다. 압축만 풀면 되고, 설치는 따로 할 필요가 없습니다. D:\cwebp에 압축을 ...

아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법

아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법

아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...

SASS / Mixin 정의하고 사용하기

SASS / Mixin 정의하고 사용하기

Mixin 정의하기 Mixin은 다음과 같은 형식으로 정의합니다. @mixin mixin-name {   // code } 인자를 포함하여 다음과 같이 정의할 수도 있습니다. @mixin mixin-name( $arg1, $arg2, ... ) {   // code } Mixin 사용하기 Mixin을 사용할 때는 다음과 같이 합니다. @include mixin-name; 인자가 있는 mixin이라면 다음과 같이 합니다. @include mixin-name( value1, value2, ... ); 예제 1 가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다. SCSS @mixin jb ...