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

본문 바로가기
전체검색

아이디비번찾기

그누보드 팁

그누보드 영카트 초보 사용자를 위한 기본 매뉴얼, 스킨 제작 기초강좌를 공유합니다.

그누보드에 Font Awesome 적용하기

페이지 정보

작성자 관리자 작성일17-11-16 12:32 조회589회

본문

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

로그인 후 댓글을 남겨주세요.
그누보드 팁 목록
번호 제목
공지 그누보드 팁 자료실 공지사항
92 썸네일 이미지 출력할 때 여백 없이 사용하기
91 문자열 글자 자르기 cut_str 함수
90 로그인 로그아웃했을 때 특정 페이지로 이동
89 메뉴 설정 회원 레벨별로 다르게 출력하기 댓글2
88 관리자 페이지 메뉴 추가하는 방법
87 게시판 조회수 새로고침 할 때마다 증가시키는 방법
86 인기 검색어 DB에 저장하지 않기
85 회원 아이디를 이메일 주소로 가입 및 로그인 댓글4
84 특정 게시판에서 이미지 파일만 업로드 허용하기
83 총 게시물수, 코멘트수 출력하기
82 게시판 관리자가 본인보다 레벨이 높은 회원이 작성한 글 관리
81 분류명에 특수문자는 사용할 수 없습니다.
80 네아로 네이버 소셜 로그인 도메인 www 유무에 따라 안 되는 현상
79 네아로 네이버 소셜 로그인을 사용할 때 접속 해제하는 방법
78 최고관리자,게시판관리자 여러명 추가하기
77 테스트 회원 아이디를 제공할 때 회원 정보 수정 금지
76 아이코드 문자 발신번호 등록하는 방법
75 Warning: Unknown: write failed: Disk quota exceeded 그누보드 사용 …
74 소셜 로그인 그누보드 5.3버전에 있는 것을 5.2버전에 추가하기 댓글2
73 사이트에 숨김 처리된 스팸 광고 글이 있는지 확인하는 방법
72 광고 스팸성 글을 안 보이게 숨겨서 올리는 것 필터링
71 게시판 글 제목이나 내용에서 단어 필터링 관리자는 예외 시키기
70 인덱스(index) 페이지에 특정 게시판을 직접 출력하기 댓글4
69 모바일과 PC 테마 각각 다른 테마를 사용해서 적용하기
게시물 검색


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

Copyright © GNUSTUDY. All rights reserved.
상단으로