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>

같은 카테고리의 다른 글
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 ...

다음 웹마스터 도구 베타에 사이트 등록하는 방법

다음 웹마스터 도구 베타에 사이트 등록하는 방법

카카오에서 다음 웹마스터 도구 베타 서비스를 시작하였습니다. 구글 서치 콘솔, 네이버 웹마스터 도구, 빙 웹마스터 도구와 비슷한 서비스를 제공하는 것이라 추측합니다. 사이트 등록하고, 색인이 잘 되는지 확인하고, 문제점을 파악하고... 그래서 사이트를 등록을 해보았는데... 좀 특이한 것이 있습니다. 우선 robots.txt로 사이트 인증을 합니다. 다른 웹마스터 도구는 HTML 태그를 사용할 수 있는데, 다음은 특이하게도 ...

SASS / @import로 다른 파일 가져오기

SASS / @import로 다른 파일 가져오기

CSS에서 @import로 다른 파일을 연결시킬 수 있습니다. SASS에서도 @import를 사용할 수 있는데, CSS의 @import와는 문법이나 작동 방식이 다릅니다. 문법 @import "path/filename"; 예를 들어 @import "inc/abc.scss"; 는 inc 폴더 안의 abc.scss 파일을 가져옵니다. CSS 파일 가져오기 CSS 파일을 가져오기 하면 CSS의 @import 형식으로 변환됩니다. SCSS @import "inc.css"; CSS @import url(inc.css); SCSS 파일 가져오기 SCSS 파일을 가져오면 그 파일의 내용이 현재 파일에 추가됩니다. inc.scss h1 { margin: ...

MathJax / 홈페이지에 수식 출력하게 해주는 스크립트

MathJax / 홈페이지에 수식 출력하게 해주는 스크립트

MathJax는 홈페이지에 수식을 표현할 수 있게 해주는 오픈소스 자바스크립트입니다. 다음의 스크립트만 HTML 문서에 추가하면 수식을 넣을 수 있습니다. <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: } }); </script> <script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 수식 입력은 LaTeX나 MathML 등으로 합니다. LaTeX으로 수식을 나타낸 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

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

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

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

코딩용 글꼴 D2Coding 설치하는 방법

코딩용 글꼴 D2Coding 설치하는 방법

코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다. 코딩에 ...

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 5 / 아이콘으로 체크박스 디자인하기

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

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

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"; } 기본 마커 없애기 순서 ...

윈도우(Windows) 버전과 인터넷 익스플로러(IE : Internet Explorer) 버전

인터넷 익스플로러는 마이크로소프트가 제공하는 웹브라우저입니다. 현재는 점유율이 많이 낮아졌지만, 한때 95%가 사용할 정도로 절대 강자였던 프로그램입니다. IE의 가장 큰 특징은 윈도우(Windows)에 종속되어 있다는 것입니다. 즉, 윈도우 버전마다 설치할 수 있는 IE의 버전이 다릅니다. 최신 버전의 IE를 사용하려면 최신 버전의 윈도우를 사용해야 합니다. 사용자가 IE 때문에 윈도우를 살리는 없기에, 웹 개발자에게는 아주 골치아픈 ...