< 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; : 아이콘 우측 여백
댓글목록
등록된 댓글이 없습니다.
관리자에게만 댓글 작성 권한이 있습니다.