현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 무료 아이콘 사용 방법 (XEICON)
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2024-01-23
  • 추천 추천하기
  • 조회수 202


< XEICON (XE아이콘) 사용 방법 >





https://xpressengine.github.io/XEIcon/index.html


위 사이트에 접속 후 상단 메뉴 중 LIBRARY 를 클릭하면 XE아이콘 라이브러리로 들어갑니다.


 XE아이콘은 4px 라인 아이콘으로 구성된 24 x 24px 그리드 위에 작업 된 벡터 아이콘입니다.

무료 폰트 아이콘이며, 영리 목적으로 사용 가능한 오픈 소스입니다.

크기 변경이 자유롭습니다. 파일을 다운로드하거나 설치할 필요없이 소스만 복사하여 넣어주면 됩니다.



<head>태그 안에 아래 코드를 넣습니다.


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



xeicon 공식 홈페이지 라이브러리에서 변경하고 싶은 아이콘 이름을 드래그해서 

아래 소스의 빨간 부분처럼 클래스 이름만 바꿔주면 해당 아이콘으로 변경이 됩니다. 



(참고 : 아래 소스 중 클래스에 포함된 xi-x, xi-x2, xi-x3, xi-x4, xi-x5 이런 식으로 숫자를 바꿔 크기 변경도 가능하지만, 

좀 더 디테일한 크기 변경을 하려면 font-size 태그로 가능합니다. )


예시) <i class="xi-home-o xi-x"></i> 

       <i class="xi-bars xi-x"></i>

       <i class="xi-search xi-x"></i>



아래 예제는 별모아 홈페이지 상단 메뉴 중 '문의하기' 메뉴입니다.

CSS를 삽입하여 아이콘의 크기, 여백 등을 조절 가능합니다.  



<i class="xi-message-o xi-x" style="font-size:23px; line-height:150%; padding-right:3px;"></i>문의하기



font-size:23px; : 아이콘 크기

line-height:150%; : 아이콘 상단 여백

padding-right:3px; : 아이콘 우측 여백 



첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.