그누보드에 Font Awesome 적용하기 - 그누보드팁

본문 바로가기
전체검색

그누보드팁

그누보드, 영카트 초보 제작자분들을 위한 다양한 스킨 제작 활용 팁을 공유합니다.

그누보드에 Font Awesome 적용하기

관리자 17-11-16 12:32

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 파일 상단에 있는 로그인쪽 메뉴에 이렇게 넣어본다면..


3a3c7090721ffbf29313a79f7374ff09_1510802237_5476.gif


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

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 사이트를 둘러보시면 이 외에 다양한 정보들이 있으니 참고해서 활용하세요.

로그인 후 댓글 작성 가능합니다.
그누스킨닷컴

그누스터디는 그누보드, 영카트를 이용하시는 초보 사용자를 위한 정보를 공유합니다.

E-MAIL : gnustudy@naver.com / 카카오톡 : gnustudy / 텔레그램 : gnustudy
제작 문의를 제외한 일반 문의는 QA 게시판을 이용해주세요.

Copyright © GNUSTUDY. All rights reserved.