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

새 창이 뜨면 밑에 있는 [No thanks, just download Font Awesome 4]를 클릭하면 다운로드가 됩니다.

압축을 풀면 여러 폴더와 파일이 있는데, 서버에 업로드해야 하는 파일은 css 폴더 안의 font-awesome.min.css 파일과 fonts 폴더에 안에 있는 모든 파일입니다.

폴더 구조를 유지한 채 업로드한다면 그대로 사용하면 되고, 폴더 구조를 다르게 해서 업로드해야 한다면 font-awesome.min.css 파일을 열고 @font-face에 있는 font 파일까지의 경로를 수정해줘야 합니다.

업로드 한 후 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다. (경로는 적절히 수정합니다.)

<link rel="stylesheet" href="path/css/font-awesome.min.css">

아이콘 넣기

HTML 문서에

<i class="fa fa-xxx"></i>

처럼 생긴 코드를 넣으면 아이콘이 나옵니다.

예를 들어

<i class="fa fa-search"></i>

를 넣으면 돋보기 모양의 아이콘이 나옵니다.

코드는 Font Awesome 홈페이지의 아이콘 목록에서 찾을 수 있습니다.

원하는 아이콘을 클릭하면 확대된 아이콘과 코드를 볼 수 있습니다.

아이콘의 클래스 값은 아이콘 이름을 그대로 사용합니다. 예를 들어 아이콘 이름이 ban이라면

<i class="fa fa-ban"></i>

이 되고, 아이콘 이름이 home이라면

<i class="fa fa-home"></i>

이 됩니다.

Font Awesome은 폰트이므로, 글자를 꾸미는 것과 같은 방식으로 아이콘을 꾸밀 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Coding Factory</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <style>
      .a {
        margin: 70px 0px;
        text-align: center;
        font-size: 140px;
        color: #2196F3;
      }
    </style>
  </head>
  <body>
    <p class="a"><i class="fa fa-bullhorn"></i></p>
  </body>
</html>

Related Posts

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

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

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

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