FastBoot 스킨 그래픽 아이콘 폰트 어썸(Awesome Font) 조절 사용

Posted by 넉넉한

2018. 3. 26. 14:22 웹페이지

FastBoot 스킨 그래픽 아이콘 폰트 Font Awesome 조절 사용하기

웹문서를 보면 그래픽 아이콘이 문서를 보기 좋게 장식하고 있는 것을 볼 수있다. 그중 많은 그래픽 아이콘이 이미지 아이콘이 아니고 폰트(글꼴)로 제공되어 표시되고 있으며 폰트(글꼴)와 같이 크기와 색상 조정이 가능하다. 구글 아이콘 폰트, 부트스트랩 아이콘 폰트(glyphicon), 어썸(Awesome) 폰트 등 여러 아이콘 폰트가 제공되고 있으며 glyph icon이라 불린다.

본 블로그 스킨은 FastBoot 스킨이며 Awesome Font 아이콘을 사용하고있다.

Awesome 그래픽 아이콘

FastBoot 스킨에서 사용하고 있는 Awesome Font

아이콘 name	아이콘 사용	아이콘 name	아이콘 사용
cogs	관리자	lock	Logout 상태
unlock	Login 상태	Home	Home
bars	글제목	tags	태그
user	댓글 name	lock	댓글 password
check	댓글 달기	comment	Notice
list	Category	file-o	Writings
comments	Comments	random	Trackbacks
link	Links	rss	RSS Feed
info-circle	information	angle-double-up	toTop

어썸 아이콘 폰트(Awesome icon Font) HOME page

Awesome font icon

▶현재 버전은 5.0.8이며 무료 폰트가 946개 제공되고 있다. 좌측 Free 항목 체크후 나온 폰트이며 Free 항목 아래 카테고리별로도 볼 수있다. 우측 상단(2번) 선택에 따라 폰트 List 보기 방식을 변경할 수 있다.
(3)번은 마우스를 선택하고자 하는 폰트에 올려 놓은 상태이며 아래에 있는 텍스트는 폰트명이며 폰트명에 프리픽스 fa-를 붙여 적용한다. 폰트를 클릭하면 폰트 사용 상세를 볼수 있으며 unicode도 나와있다.

Awesome icon Font 사용법

다운로드하여 사용할 수도있고 link 태그를 head 부분에 삽입하여 사용할 수도있다(CDN 링크). CDN link는 Awesome Font 홈페이지 또는 부트스트랩에서 제공한다.
FastBoot 스킨에서는 부트스트랩 링크 CDN을 사용하고 있으며 본 스킨의 Awesome 폰트 버전은 4.0.3이며 부트스트랩에서는 현재 4.7.0버전을 제공하고 있다. 이번에 본 스킨에도 부트스트렙 CDN 버전 4.7.0으로 link를 변경했다.(스킨 어느 부분에 오류가 나올지도 모른다)

종전 FastBoot 링크 내용
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />

부트스트랩 현재 CDN(링크)
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

⚫ 아이콘 사용 태그

▶어썸 아이콘 폰트 홈페이지에서는 간편하게 적용하기위해 인라인 요소인  태그를 선호하며  태그도 사용할 수있다고 하고 있다.
▶상위요소의 사이즈, color 상속 : 아이콘 사이즈는 기본적으로 1em으로 상위요소 폰트 사이즈와 같다.

⚫ CSS class 적용

▶Awesome 아이콘 폰트 사용 CSS 프리픽스 : fa (버전 5.0 이상은 fas로 변경됨)
▶아이콘명 프리픽스 : 제공되는 아이콘명 앞에 fa-를 덧붙힌다.
▶아이콘색상, 크기 등 여러 클래스 사용

적용예

아래 내용은 본 폰트 아이콘 홈페이지의 버전 4.7.0 적용예를 발췌한 것이다.
https://fontawesome.com/v4.7.0/examples/

⚫ 기본 아이콘 적용

fa-camera-retro

 fa-camera-retro

⚫ 아이콘 색상 적용

상위 요소를 만들고 상위 요소 style에 color 속성을 추가한다.

fa-camera-retro

 fa-camera-retro

⚫ 아이콘 크기 조정

아이콘 크기를 설정하는 클래스를 추가 사용한다.

fa-lg =>33% 확대
fa-2x =>2배
fa-3x =>3배
fa-4x =>4배
fa-5x =>5배

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

⚫ 아이콘을 균등 너비(width)로 적용

클래스 fa-fw를 추가 사용하여 열거된 아이콘의 너비(width)를 균등 너비로 고정한다. 탐색목록(nav list), list group 등에 유용하게 사용한다.

Home Library Applications Settings

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

⚫ 리스트에 표시된 아이콘(ul, ol등 리스트 태그)

fa-ul 클래스를 ul 태그에 적용하고 하위 그룹 아이템에 fa-li 클래스를 적용하여 ul 태그 리스트 아이템 앞에 붙는 블릿(글머리 기호)을 Awesome 아이콘으로 대체할 수있다.( 본 블로그 스킨에서는 글머리 기호가 없어지지 않습니다. 기본 style.css와 font-awesome.css CSS 스타일상 우선 순위 문제로 보입니다.)

List icons can
be used to
replace bullets
in lists

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

⚫ 아이콘에 테두리(border)를 설정하고 좌측, 우측 정렬을 설정할 수있다.

인용부호에 테두리를 붙히고 좌측 정렬을 적용한 상태.
추가된 텍스트는 우측에 표시된다.

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>인용부호에 테두리를 붙히고 좌측 정렬을 적용한 상태. 
추가된 텍스트는 우측에 표시된다.

태그에 사용된 attribute aria-hidden="true"는 장애를 가진 분들을 위해 사용되는 attribute임

⚫ 아이콘 애니메이션 효과

▶fa-spin 클래스 사용 : 회전
▶fa-pulse 클래스 사용 : 8 단계 회전
▶적절한 아이콘명 : fa-spinner, fa-refresh, fa-cog

Loading...Loading...Loading...Loading... Loading...

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

태그에 사용된 클래스 sr-only는 장애있는 분을 위한 클래스임 IE8-9 적용 안됨

⚫ 임의적으로 회전 또는 젖혀진 아이콘

클래스 fa-rotate- 또는 fa-flip- 적용

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

⚫ 중첩 아이콘

fa-stack 클래스를 갖는 상위요소 밑에 fa-stack-2x(큰아이콘) 클래스와 fa-stack-1x(작은아이콘) 클래스를 갖는 2개의 하위 요소 태그를 사용해 중첩된 아이콘을 생성할 수있으며 fa-inverse 클래스를 추가 색상 반전을 할 수있다.

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

이상은 Awesome 폰트 아이콘 4.7.0버전 적용 예제 페이지 내용 발췌이며 자세한 내용은 링크를 따라가면 볼 수있다.
https://fontawesome.com/v4.7.0/examples/

현재 버전의 사용법은 아래 링크에서 볼 수있으며 변경된 방식도 볼 수있다.
https://fontawesome.com/how-to-use/svg-with-js

2018/03/15 - [웹페이지] - 구글 웹폰트 적용 및 문제점 정리

2018/03/06 - [웹페이지] - 웹페이지 이 글꼴(font)은 무슨 글꼴인가 획인하기-WhatFont tool

2018/03/04 - [웹페이지] - FastBoot 스킨 머리말(h1-h4) 인용문(blockquote) 모양 바꾸기

2018/02/19 - [웹페이지] - FastBoot 스킨 좌측 삼각형 메뉴 아이콘 조절-크기,

2018/02/02 - [분류 전체보기] - 티스토리 반응형 스킨 애드센스 반응형