Web Font XEIcon & Font-awesome 사용하기

안녕하세요 별깡솔입니다 : )

별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다

Web Font 사용하기

별깡솔 블로그에서 xeicon & font-awesome을 많이 사용합니다

인스타그램 피드 사용하기 포스팅에서 담지 못했던 내용을 알아보겠습니다

xecion

xecion에 접속합니다

library-2.3.3 페이지에 CATEGORY로 분류가 되어 있으며 아래로 스크롤해서 문서를 살펴보면 많은 아이콘들이 있습니다

GET STARTED 페이지에서 사용 방법이 자세하게 안내되고 있습니다

가장 쉬운 방법으로 header 사이에 아래 cdn을 붙입니다

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

css Import 방법 또한 안내되어 있습니다

EXAMPLES 페이지에서 아이콘 표시 방법이 있습니다

제가 사용하는 2가지 방법에 대해 알아보겠습니다

i class="xi-"

i 태그 클래스에 아이콘 이름으로 하는 방법입니다

library 2.3.3 페이지에서 검색창에 heart를 검색한 화면입니다

i class="xi-" 따온표 안에 xi-heart를 집어 넣습니다

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

= class="xi-heart-o"></i

유니코드로 사용하기

GET STARTED 페이지 가장 아래 Unicode HTML Entity 파트를 참고하세요

더 나아가 가상클래스에 유니코드 사용방법입니다

CSS Pseudo-class 가상클래스에 대한 학습이 선행되어야 사용하기 편합니다

fontawesome css-pseudo-elements 사용법

이 방법이 이해하기 어려우면 i 태그 또는 GET STARTED 링크를 참고하세요

GITHUB 페이지에서 fonts 폴더 안에 xeicon.svg 파일을 다운 받아 메모장으로 열어봅니다

xeicon.svg

ctrl + F 찾기 단축키로 heart를 검색합니다

필요한 부분은 'ea10' 입니다

:before & :after 둘중에 적절하게 선택해서 content:'\ea10';

backspace 삭제 버튼 바로 아래 키를 눌러서 유니코드 앞에 \ 반드시 삽입하셔야 합니다

content에 유니코드를 넣었다면 font-family를 선언 해야합니다

{font-family : xeicon;}

html

<span class="heart"></span>

css

.heart {content: '\ea10';}

heart 예

<span class="heart"></span>

.heart:before {
    content: '\ea10';
    font-family: xeicon;
}

.heart:after {
    content: '\ea11';
    font-family: xeicon;
}

:before
:after

css로 font color, size, weight 등 다양하게 꾸밀 수 있습니다

Font-Awesome

Font-Awesome에 접속해서 Start for Free 를 클릭해서 email 인증을 통해 cdn을 얻습니다

Font-Awesome은 4,5,6 버전이 있고 각 버전에 맞는 cdn이 필요합니다

Font-Awesome 4 페이지

SVG, CSS download

이메일 인증이 필요한 귀찮은 단계가 있지만
7,865 아이콘이 있으며 무료로 사용 가능한 1,609 아이콘이 있습니다

그리고 i버튼을 클릭하면 유니코드를 손쉽게 카피할 수 있습니다

다양한 아이콘이 있으며 그에 따른 font-family도 5가지 있습니다

Solid, Regular, Light, Duotone, Brands의 font-weight를 매칭해야 제대로 나타납니다

XEIcon에 비해 사용 방법이 조금 까다롭지만 더 다양한 아이콘이 있습니다

Docs 페이지에서 사용 방법을 안내하고 있습니다

XEIcon과 사용법이 같으며 더 다양한 방법을 제시합니다

cheatsheet 페이지에서 유니코드를 더 쉽게 찾을 수 있습니다

별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사드립니다

구독과 좋아요 감사합니다 : )