About

XEIcon은 XpressEngine(CMS)에서 제공하는 아이콘폰트입니다.
웹사이트에 크기확장형으로 쓸 수 있는 백터 그래픽 아이콘세트로, 612개의 픽토그래픽아이콘으로 구성되어 있습니다.
XEIcon은 XE공모전 2014에 제공된 템플릿에 적용되어 있습니다.
XEContest 2014 템플릿을 참조하여 XEIcon이 적용된 페이지를 참조할 수 있습니다.
설치(Installation)
XEIcon 사용방법은 매우 간단합니다. 자신의 웹사이트에 단 두 줄만 추가하는 것으로 바로 사용이 가능합니다.
612개의 XEIcon과 함께라면 더욱 멋지고 빠르게 프로젝트를 완성할 수 있습니다.
  • 가장 쉬운 방법(Easiest) : CDN by Amazon S3
    CDN을 사용하면 한 줄의 코드로 XEIcon을 사용할 수 있습니다. 파일을 다운로드하거나 설치할 필요가 없습니다.
    • 1. 사이트 <head> 태그 안에 아래의 코드를 붙입니다.

      <link rel="stylesheet" href="https://s3.amazonaws.com/icomoon.io/49314/XEIconv10/style.css">

      Cloudfront

      <link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/49314/XEIconv10/style-cf.css">

    • 2. XEIcon 라이브러리를 사용해서 XEIcon을 프로젝트에 적용합니다.
    • 1. Paste the following code into the <head> section of your site’s HTML.

      <link rel="stylesheet" href="https://s3.amazonaws.com/icomoon.io/49314/XEIconv10/style.css">

      Cloudfront

      <link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/49314/XEIconv10/style-cf.css">

    • 2. check out the XEIcon Library to start using XEIcon!
  • 쉬운 방법(Easy) : Import CSS
    폰트를 다운받아 해당 버전의 XEIcon CSS를 사용하는 방법입니다.
    • 1. XEIcon 홈페이지에서 XEIcon을 다운로드 받습니다.
    • 2. XEIcon이라는 폴더명으로 자신의 웹사이트에 복사합니다.
    • 3. html <head>태그 안에 xeicon.min.css 파일 위치를 아래와 같이 가져옵니다.

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

    • 4. XEIcon 라이브러리를 사용해서 XEIcon을 프로젝트에 적용합니다.
    • 1. Copy the entire XEIcon directory into your project.
    • 2. In the of your html, reference the location to your xeicon.min.css.

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

    • 3. check out the XEIcon Library to start using XEIcon!
사용방법(How to use)
XEIcon은 두가지 방법으로 웹에 적용할 수 있습니다. 적용과 설정 방법은 아래와 같습니다.
  • Html tag
    • 간단하게 <i>태그를 웹페이지에 써서 쓸 수 있습니다.

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

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

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

  • Unicode HTML Entity
    폰트를 다운받아 해당 버전의 XEIcon CSS를 사용하는 방법입니다.
    • 1. 유니코드로 XEIcon을 적용하려면, CSS에서 XEIcon을 불러와야 합니다.

      span.icon {font-family : XEIcon;}

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

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

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

      span.icon {font-family : XEIcon;}

      2. Using the Unicode HTML Entity to display the icon

      <span class="icon">&#xe021;</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.

About Us
Published by XpressEngine.
Copyright ⓒNAVER Corp. Supported by D2 Program.
위로가기