[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기

Font Awesome은 웹에서 다양한 아이콘을 손쉽게 활용할 수 있는 CSS 라이브러리입니다. 

Font Awesome 6버전까지 출시가 되었어도 아직까지도 Font Awesome 4가 많이 사용되어 4.7버전을 이용하여 아이콘을 사용해 보려고 합니다.
버전마다 사용법 조금씩 차이가 있다는 점 알아두세요 

★ 중요사이트
Font Awesome 4.7 아이콘 
Bootstrap Cheat Sheets
Font Awesome 4.7 css 다운로드

 

※ Font Awesome 설정하기


사이트에서 파일을 다운받아서 사용할 수도 있습니다. (다운로드 사이트 가기)

여기서는 CDN 서비스를 이용하겠습니다. 

구글에서 [font awesome 4.7 cdn] 으로 검색해서 cdn를 선택합니다. 

여기서는 bootstrap CDN을 이용하려고 합니다. 

▶ link 태그를 이용하는 방법

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


▶  style를 이용하는 방법

  <style>
    @import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
  </style>

둘 중 한가지 방법을 선택하면 됩니다. 여기서는 link 태그를 이용하겠습니다. 

※ 사용할 아이콘 선택하기

구글에서 [fontawesome 4.7]로 검색해서 사이트로 이동합니다. (사이트 바로가기)


4.7 버전에서는 675개의 아이콘를 사용할 수 있다고 하네요 
검색창에 bar로 검색해서 bars를 사용해 보겠습니다. 

 

<i> 태그를 이용하여 아이콘을 표시하면 됩니다. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <i class="fa fa-bars"></i>메뉴 바로가기
  
</body>
</html>

 aria-hidden="true" 를 생략해도 됩니다. 

>>> 결과 <<<

 

※ 아이콘 크기 변경하기

fa-로 시작하는 class를 추가하여 크기를 변경할 수 있어요

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <i class="fa fa-bars"></i> 기본크기 <br>
  <i class="fa fa-bars fa-lg"></i> fa-lg <br>
  <i class="fa fa-bars fa-2x"></i> fa-2x <br>
  <i class="fa fa-bars fa-3x"></i> fa-3x <br>
  <i class="fa fa-bars fa-4x"></i> fa-4x <br>
  <i class="fa fa-bars fa-5x"></i> fa-5x <br>
</body>
</html>

>>> 결과 <<<

더 많은 사용법은 샘플 페이지를 참고하세요 (샘플페이지로 가기)

※ 아이콘 내 맘대로 꾸미기 (fa class 이용하기)

<i class="fa fa-bars"></i> 태그의 fa class를 이용하여 내 맘대로 꾸밀 수 있어요 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>
    .fa {
      font-size: 25px;
      color: crimson;
      transform: rotate(90deg);
      background-color: blue;
      padding: 5px;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      box-shadow: 0 0 5px black;

    }
  </style>
</head>
<body>
  <i class="fa fa-bars"></i>
</body>
</html>

>>> 결과 <<<

※ 아이콘 내 맘대로 꾸미기 (다른 태그에서 이용하기)

Font Awesome에서 제공하는 class를 이용하지 않고  unicode를 이용해서 커스터마이징이 가능해요 

▶ unicode 얻는 방법 

구글에서 [fontawesome 4.7]로 검색해서 사이트로 이동합니다. (사이트 바로가기)


검색창에 bar로 검색해서 bars를 사용해 보겠습니다. 

bars를 선택하면 unicode를 확인할 수 있어요 

아래와 같이 스타일을 지정하면 div를 이용하여 아이콘을 표시할 수 있어요 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .box::before {
      content:"\f0c9";   /* f0c9은 fontawesome에서 bars의 유니코드 */
      font-family: fontAwesome; /* fontAwesome는 fontawesome에서 사용하는 폰트 */
    }

  </style>
</head>
<body>
  <div class="box"></div>
  
</body>
</html>

>>> 결과 <<<

style를 추가하여 내맘대로 꾸밀 수 있어요

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .box {
      border: 1px solid #000;
      width: 50px;
      height: 50px;
      position: relative;
    }
    .box::before {
      content:"\f0c9";   /* f0c9은 fontawesome에서 bars의 유니코드 */
      font-family: fontAwesome; /* fontAwesome는 fontawesome에서 사용하는 폰트 */
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: black;
      color: #fff;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;

    }

  </style>
</head>
<body>
  <div class="box"></div>
  
</body>
</html>

>>> 결과 <<<

※ 좀 더 쉽게 아이콘 추가하기 

구글에서 fontawesome 4.7로 검색후 Bootstrap Cheat Sheets를 선택하세요

Bootstrap Cheat Sheets 바로가기

bar로 검색하세요

Copy 버튼을 누르면 3개의 메뉴가 표시됩니다.

HTML Tag를 누르고 붙여넣기( Ctrl-v)를 하면 태그가 추가됩니다. 

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

CSS Rule를 누르고 붙여넣기( Ctrl-v)를 하면  유니코드가 추가합니다.

content:"\f0c9"

 

Bootstrap Cheat Sheets를 이용하면 좀 더 쉽게 아이콘을 추가할 수 있습니다. 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (1) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기  (0) 2025.01.02
[HTML+CSS] icon(아이콘)이 필요할 때 - XE Icon사용하기  (1) 2025.01.01
[HTML+CSS] a 태그를 이용하여 버튼 만들기  (0) 2024.12.29

+ Recent posts

티스토리툴바