[css, html, icon] 아이콘 css 추가해서 사용하기

항상 아이콘을 사용하기 위해서는 퍼블리셔에게 매번 요청하고 그 답답함을 해소 하기 위해 내가 찾아 보기로 했다.

알고보면 의외로 간단하게 추가하고 CSS에서 사용 할 수 있다.

1.

https://icomoon.io/ 접속  - 상단 IconMoon App 클릭

2. 다음 화면에서 우선 Icon Library 를 클릭 하고 나오는 아이콘 라이브러리에서 추가하고 싶은 아이콘 라이브러리의 'Add' 버튼 클릭 

 - 다만 Purchase 버튼이 나오는 곳은 따로 구매를 해야 된다.

3. add 추가한 뒤 아이콘 라이브러리에서 사용하고자 하는 아이콘을 클릭 하여 선택 한다.

4. 선택 한 뒤 화면 하단에 font 부분을 누르게 되면 내가 선택 한 아이콘들로 구성 된 설정 페이지를 볼수 있다.

해당 화면의 상단 'Perferences'를 클릭 하면 font 의 이름, 클래스 앞 확장자, ie 지원 등 을 설정 할 수 있다.

모든 설정을 다 마친 후에는 font 밑 Download 버튼을 클릭 하여 다운 받는다.

5. 다운 받은 파일을 확인 해보면 

    - demo.html -> 이전 config 화면 

    - style.css -> 아이콘에 대한 정의가 된 css

    - fonts 폴더 -> 아이콘 사용에 필요한 폰트(우리는 아이콘들을 하나의 폰트로 저장을 한 것)

이후 단계에서는 

fonts, css 파일을 가져다가 사용할수도, css 파일 내의 값만 기존에 사용 중인 css 파일에 넣어서 사용 하는 등으로 사용 할 수 있다.

사용 방법을 간단히 demo.html 에서 파악을 하면 

<span class = "i-home">

<a href="#" class = "i-home"> 

등으로 클래스에 css에 설정된 아이콘의 클래스 명을 넣으므로써 사용 할 수가 있다.

<div class="glyph fs2">

<div class="clearfix bshadow0 pbs">

<span class="i-home">

</span>

<span class="mls"> i-home</span>

</div>

<fieldset class="fs0 size1of1 clearfix hidden-false">

<input type="text" readonly value="e900" class="unit size1of2" />

<input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />

</fieldset>

<div class="fs0 bshadow0 clearfix hidden-true">

<span class="unit pvs fgc1">liga: </span>

<input type="text" readonly value="" class="liga unitRight" />

</div>

</div>