폰트어썸 - 사용 방법, CSS 수정 방법, 추가 방법 (2편) > 웹제작/운영

폰트어썸 사용 방법 2

CSS 수정 방법, 추가 방법

홈페이지를 제작하려면 작은 아이콘을 많이 만들게 된다. 그런데 다양한 아이콘을 무료로, 그것도 편리한 CSS 방식으로 사용할 수 있는 방법이 있다. 

그래서 폰트어썸 아이콘 사용 방법을 설명한다.

(연재 글이므로 아래 링크에서 1편도 함께 보면 유용함)

 

폰트어썸 - 사용 방법, CSS 수정 방법, 추가 방법

 

폰트어썸 사용방법

두 가지 순서가 있다. 첫 번째는 로딩해 놓는 것이고, 두 번째는 호출하는 것이다. 

폰트어썸 사용방법은 매우 쉽다. 다만, head.sub.php 파일을 수정할 수 있다는 전제 하에...

FTP로 접속해서 head.sub.php을 연다. 여기에 아래의 코드를 복사해 넣고 수정한다.

[code]

<link rel="stylesheet" href="홈페이지 주소와 경로/font-awesome/css/all.min.css">

[/code]

위 코드에서 한글로 된 부분을 변경하면 된다. 자신의 도메인을 입력한 후, 설치한 경로를 완성해 주면 된다. 

다음으로 할 일은 호출하는 것이다. html이나 php파일을 연후에 span으로 글자 태그를 넣듯이 붙여 넣으면 된다. 

[code]

<div>

   <i class="fa fa-circle-o" aria-hidden="true"></i> 내용

</div>

[/code]

이렇게 해 주면 자동으로 아이콘이 나타난다. 

폰트어썸 사용하기 추가 방법

그렇다면, 어떤 아이콘인지 알아야 불러 올 것이 아닌가 궁금해질 것이다. 

그렇다면 아래 링크를 방문하면 된다. 

링크 : https://fontawesome.com/v4/icons/

수 많은 아이콘이 있을 것이다. 마음에 드는 것을 클릭하면, 위에서 본 <i class="fa fa-circle-o" aria-hidden="true"></i> 같은 코드가 나온다. 그것을 복사해서 붙이면 끝이다. 이게 사용방법 전부다. 

그런데, 만약 색이나 크기 등을 변경하고 싶으면 어떻게 할까?

이것은 CSS파일을 이용한다. css 스타일 파일을 열어서 아래처럼 추가한다. 

[code]

<style type="text/css">

   .fa.fa-circle-o { color:색코드; width:가로 크기; height:세로 크기;  }

</style>

[/code]

위에서 한글로 적힌 부분을 찾아서 고치면 변경할 수 있다. 

만약, 위처럼 fa-circle-o만 바꾸는 것이 아니라 모든 폰트어썸을 한꺼번에 수정하고 싶다면 아래처럼 하면 된다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

[code]

<style type="text/css">

   .fa { color:색코드; width:가로 크기; height:세로 크기;  }

</style>

[/code]

아주 간단하다. 그래서 이것을 쓰는 것이다.

(연재 글이므로 아래 링크에서 1편도 함께 보면 유용함)

1편 링크 : http://www.kiss7.kr/siteblog/37

"폰트어썸 아이콘 - CSS 설치 방법, 다운로드 주소, 경로"