지난 번에 글 작성했던 구글 머티리얼 아이콘처럼 XEIcon도 아이콘을 이미지 다운로드 없이 소스 상에서 사용가능한 아이콘 폰트이다.
개발할 때 구글 머티리얼 아이콘보다 더 자주 사용했던 것 같다.
실제로도 많은 개발자들이 프로젝트 진행 중 사용하고 있고, 구글 머티리얼 아이콘과 같이 사용하기도 한다.
두 아이콘 다 단순한 형태를 취하고 있기 때문에 잘 어울린다.
XEIcon 소개
여러 icon을 폰트의 형태로 무료 사용이 가능하며, 영리적 이용도 가능하다.
아이콘의 색상과 크기 등을 CSS로 자유롭게 수정이 가능하다는 것도 큰 장점이다.
XEIcon 사용 준비
XEIcon은 다른 웹폰트처럼 직접 파일을 다운로드 받아서 사용하거나, CDN의 형태로 사용할 수 있다.
아이콘을 적용할 개발 환경에 따라서 알맞게 적용하면 된다.
CDN으로 사용하기
<head> ~ </head> 사이에 아래의 소스를 입력한다.
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">css파일을 다운로드 받을 것 없이, 위의 소스를 head 사이에 끼워넣는 것만으로도 자유롭게 XEIcon을 사용할 수 있다.
XEIcon 공식 홈페이지에서도 설명하는 가장 쉬운 방법이다.
CSS파일을 다운로드 받아서 사용하기
https://xpressengine.github.io/XEIcon/index.html
XEIcon, 문자를 그리다
XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다.
xpressengine.github.io
위의 사이트에 접속한다.
메인 화면에서 Download 버튼을 클릭한다.
다운로드 버튼을 클릭하면 압축파일을 하나 다운로드 받게 된다.
압축파일 안에 CSS파일이 있다.
이 중 xeicon.min.css 파일을 작업 환경의 원하는 경로에 넣어준다.
/www/css/의 경로에 넣었다는 가정 하에, 아래의 소스를 <head>~</head> 사이에 넣어준다.
<link ="stylesheet" type="text/css" href="./css/xeicon.min.css">href의 경로는 xeicon.min.css 파일을 넣은 경로에 따라서 바꿔준다.
XEIcon 사용하기
XEIcon이 지원하는 아이콘 미리보기
css파일을 cdn이나 파일로 가져옴으로써 XEIcon을 사용할 준비는 끝났다.
사용하고자 하는 아이콘을 검색하기 위해 아래 링크로 접속한다.
https://xpressengine.github.io/XEIcon/library-2.3.3.html
XEIcon, 문자를 그리다
XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다.
xpressengine.github.io
여기서 원하는 아이콘이 있다면 검색하고, 미리 볼 수 있다.
만약 메뉴 아이콘을 사용하고 싶다면 menu라고 검색하면 된다.
당연히 한글 검색은 지원하지 않는다.
menu라는 키워드로 검색하니 위와 같은 결과가 나왔다.
메뉴라는 상징적인 의미를 갖고 있는 아이콘들이다.
HTML에서 XEIcon 사용하기
xi-bars 아이콘을 사용하고 싶다면, 아래처럼 소스에 입력하면 된다.
기본 형태로 사용하는 방법이다.
<i class="xi-bars"></i>
사이즈 조절은 클래스에 크기를 표현하는 클래스를 추가한다.
<i class="xi-bars xi-x"></i> // 1배
<i class="xi-bars xi-2x"></i> // 2배
<i class="xi-bars xi-3x"></i> // 3배
<i class="xi-bars xi-4x"></i> // 4배
<i class="xi-bars xi-5x"></i> // 5배
기타 사용 방법은 아래 링크를 참고한다.
https://xpressengine.github.io/XEIcon/examples.html
XEIcon, 문자를 그리다
XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다.
xpressengine.github.io
이 외에도 css를 통해 직접 XEIcon의 크기나 색상 등을 세밀하게 수정이 가능하다.
아래는 XEIcon의 여러가지 사용 방법이다.
'개발 > CSS' 카테고리의 다른 글
| CSS) input type=text placeholder CSS 변경 (0) | 2022.04.03 |
|---|---|
| CSS) background 색상, 이미지 동시에 나오게 하기 (0) | 2022.04.03 |
| CSS) 폰트 css 지정하기 (0) | 2022.04.01 |