GET STARTED

XEIcon 사용방법은 매우 간단합니다. 자신의 웹사이트에 단 두 줄만 추가하는 것으로 바로 사용할 수 있습니다.
XEIcon과 함께라면 더욱 멋지고 빠르게 프로젝트를 완성할 수 있습니다.

설치(Installation)

가장 쉬운 방법(Easiest) : CDN by jsDelivr

CDN을 사용하면 한 줄의 코드로 XEIcon을 사용할 수 있습니다. 파일을 다운로드하거나 설치할 필요가 없습니다.

    1. 1. 사이트 <head> 태그 안에 아래의 코드를 붙입니다.

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

    2. 2. examples페이지를 참조하여 XEIcon을 웹페이지에 적용합니다.

    1. 1. Paste the following code into the <head> section of your site’s HTML.

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

    2. 2. check out the examples to start using XEIcon!

쉬운 방법(Easy) : Import CSS

폰트를 다운받아 해당 버전의 XEIcon CSS를 사용하는 방법입니다.

    1. 1. XEIcon 홈페이지에서 XEIcon을 다운로드 받습니다.

    2. 2. XEIcon이라는 폴더명으로 자신의 웹사이트에 복사합니다.

    3. 3. html <head> 태그 안에 xeicon.min.css 파일 위치를 아래와 같이 가져옵니다.

      <link ="stylesheet" type="text/css" href="path/to/xeicon/xeicon.min.css">

    4. 4. XEIcon 라이브러리를 사용해서 XEIcon을 프로젝트에 적용합니다.

    1. 1. Copy the entire XEIcon directory into your project.

    2. 2. In the of your html, reference the location to your xeicon.min.css.

      <link ="stylesheet" type="text/css" href="path/to/xeicon/xeicon.min.css">

    3. 3. check out the XEIcon Library to start using XEIcon!

Bower를 통한 설치 : Install with Bower

    1. 1. 웹 패키지 관리도구 Bower 사용자 설치 방법입니다. 터미널에 아래 명령어를 입력하여 인스톨할 수 있습니다.

      bower install xeicon
      bower install xeicon#<version>

    2. 2. 자세한 설치방법은 Bower 홈페이지를 참고하시기 바랍니다.

    • c

    1. 1. Once you have bower installed, open up Terminal (or Command Prompt) and enter the following command:

      bower install xeicon
      bower install xeicon#<version>

    2. 2. You can read more about installation on Bower homepage.

사용방법(How to use)

XEIcon은 두가지 방법으로 웹에 적용할 수 있습니다. 적용과 설정 방법은 아래와 같습니다.

Html tag

  • 간단하게 <i> 태그를 웹페이지에 써서 쓸 수 있습니다.

    <i class="xi-xpressengine"></i> =

  • You can use a simple <i> tag to place an icon in your page, like this:

    <i class="xi-xpressengine"></i> =

Unicode HTML Entity

폰트를 다운받아 해당 버전의 XEIcon CSS를 사용하는 방법입니다.

    1. 1. 유니코드로 XEIcon을 적용하려면, CSS에서 XEIcon을 불러와야 합니다.

      span.icon {font-family : xeicon;}

    2. 2. 다음으로 html에 유니코드를 삽입합니다.

      <span class="icon">&#ec2e;</span>

    1. 1. Specifying the xeicon web-font in a CSS rule with <font-family>

      span.icon {font-family : xeicon;}

    2. 2. Using the Unicode HTML Entity to display the icon

      <span class="icon">&#ec2e;</span>

Note : 이 방법은 더 유연하게 사용할 수 있습니다. 예를들어, <div>, <span>과 같은 태그를 <i>태그 대신에 쓸 수 있습니다.

Note : This method may offer you more flexibility. for example, you could use a <div> or <span> tags instead of a <i>tag.

위로가기