Font Awesome 을 그누보드에 적용하는 방법을 살펴보겠습니다.

Font Awesome 은 아이콘을 이미지가 아니라 Font 방식으로 구현해 놓은 겁니다.

모양도 다양하고 기본적인 크기, 색상 등도 자유롭게 설정 가능해서 많이 사용되고 있습니다.

그누보드5 원본 basic 테마 기준으로 설치.

1. http://fontawesome.io 사이트에서 파일 다운로드 

다운받은 파일을 압축 풀고 폴더명은

font-awesome-4.7.0 에서 뒤에 버전은 그냥 삭제하고 font-awesome 이렇게 수정

2. 해당 폴더를 theme/basic/css/font-awesome 경로에 업로드

3. theme/basic/head.sub.php 파일 수정

<title><?php echo $g5_head_title; ?></title>

<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/<?php echo G5_IS_MOBILE ? 'mobile' : 'default'; ?>.css?ver=<?php echo G5_CSS_VER; ?>">

여기 바로 아래쯤에 추가.

<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/font-awesome/css/font-awesome.min.css">

설치는 일단 끝났습니다.

이제 아이콘을 실제 페이지에 어떻게 적용하는지 살펴보겠습니다.

예를 들어 head.php 파일 상단에 있는 로그인쪽 메뉴에 이렇게 넣어본다면..

여기에서 일단 마음에 드는 아이콘을 선택합니다.

http://fontawesome.io/icons
 

예를 들어 아래 아이콘을 클릭했다면.

http://fontawesome.io/icon/sign-in

넣어야 할 태그가 나올 겁니다 코드를 복사해서 원하는 곳에 그대로 넣기만 하면 됩니다.

<i class="fa fa-sign-in" aria-hidden="true"></i>

위 코드를 복사해서 예제에서처럼 theme/basic/head.php 회원가입 메뉴 옆에 추가합니다.

<i class="fa fa-sign-in" aria-hidden="true"></i> 회원가입

크기나 색상 조정은 일반적인 font 태그 그대로 적용 가능합니다.

margin 값으로 간격도 조절하면 될 겁니다.

<span style="font-size:14px;color:#ff0000;margin-right:2px"><i class="fa fa-sign-in" aria-hidden="true"></i></span> 회원가입

그누스터디 index 페이지나 외부로그인 등에 있는 아이콘은 모두 Font Awesome 입니다.

Font Awesome 사이트를 둘러보시면 이 외에 다양한 정보들이 있으니 참고해서 활용하세요.