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

본문 바로가기
전체검색

그누보드팁

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

그누보드에 Font Awesome 적용하기

관리자 17-11-16 12:32

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

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

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


그누보드 5.3 버전을 사용 중이라면  Font Awesome 파일이 포함되어 있어서 별도로 설치하지 않아도 됩니다.

5.3 버전은 1~3번 내용은 생략하고 4번 설명부터 보세요.


설치 방법은 그누보드 5.2 버전 basic 테마 기준입니다.



1. 파일 다운로드 


https://fontawesome.com/v4.7.0

https://fontawesome.com/v4.7.0/assets/font-awesome-4.7.0.zip


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

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">


설치는 일단 끝났습니다.



4. 적용 방법


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

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


3a3c7090721ffbf29313a79f7374ff09_1510802237_5476.gif


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

https://fontawesome.com/v4.7.0/icons/
 

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

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

로그인 후 댓글 작성 가능합니다.

로그인

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

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

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

Copyright gnustudy.com All rights reserved.