프로그래밍/html+css+js

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

너무 궁금해 2025. 1. 1. 20:14

 

XE Icon은 웹에서 다양한 아이콘을 손쉽게 활용할 수 있는 CSS 라이브러리입니다. 
웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷으로, 다양한 아이콘을 손쉽게 웹페이지에 적용할 수 있습니다.

 

 

※ XE Icon 설정하기


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

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

▶ link 태그를 이용하는 방법

    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css" />


▶  style를 이용하는 방법

  <style>
    @import url("//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css");
  </style>

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

※ 사용할 아이콘 선택하기

XE Icon 사이트로 이동해서 상단의 LIBRARY 메뉴를 선택합니다.  (사이트 바로가기)


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

icon 이름(xi-bars)를 확인합니다. 

<i class="xi-bars"> <i>태그에 class을 xi-bars로 지정하면 아이콘이 표시됩니다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
  </head>
  <body>
    <i class="xi-bars"></i>
  </body>
</html>

>>> 결과 <<<

 

※ 아이콘 크기 변경하기

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

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
  </head>
  <body>
  <i class="xi-bars"></i> 기본크기 <br>
  <i class="xi-bars xi-x"></i> xi-x <br>
  <i class="xi-bars xi-2x"></i> xi-2x<br>
  <i class="xi-bars xi-3x"></i> xi-3x <br>
  <i class="xi-bars xi-4x"></i> xi-4x<br>
  <i class="xi-bars xi-5x"></i> xi-5x<br>
  </body>
</html>

>>> 결과 <<<

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

※ 아이콘 내 맘대로 꾸미기 (class 추가하기)

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
    <style>
      .close {
        color: red;
        background-color: #000;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;  
        box-shadow: 0 0 5px red;
      }
    </style>
  </head>
  <body>
    <i class="xi-close-thin close"></i>
  </body>
</html>

>>> 결과 <<<

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

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

▶ unicode 얻는 방법 

태그추가 방식으로 아이콘을 추가한 후 브라우저에서 확인합니다. 

<!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="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
  </head>
  <body>
    <i class="xi-bars"></i>
  </body>
</html>

>>> 결과 <<<

F12 key를 눌러서 개발자 도구를 오픈합니다. 

아이콘 태그앞의 ▶ 표시를 누릅니다. 

오른쪽에 unicode를 확인할 수 있습니다.

오른쪽 마우스를 클릭하고  Copy declaration를 선택하면 unicode 복사할 수 있습니다.

unicode를 이용하여 아이콘을 추가합니다. 

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css" />
  <style>
    .box:before {
      content: "\e91c";  /* 아이콘의 코드 값을 설정합니다. */
      font-family: "xeicon"; /* xeicon 폰트를 사용하도록 지정합니다. */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

>>> 결과 <<<

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

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
    <style>
      .box {
        border: 1px solid #000;
        width: 30px;
        height: 30px;
      }
      .box:before {
        content: "\e91c";
        font-family: "xeicon";
        font-size: 30px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

>>> 결과 <<<