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

본문 바로가기
전체검색

그누스킨닷컴

그누보드팁

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

그누보드에 Font Awesome 적용하기

페이지 정보

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

본문

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

커뮤니티는 당분간 중단하겠습니다.
그누보드팁 목록
번호 제목
공지 그누보드 팁 자료실 공지사항
113 로그인 영역을 오른쪽에서 왼쪽으로 이동
112 1:1 문의 게시판에 새글이나 답변글 등록시 쪽지 발송하기
111 그누보드 5.3 버전 기본 메뉴 중앙 정렬하기
110 자동등록방지 캡챠(kcaptcha)코드 삭제 - 그누보드 5.3 버전
109 네아로, 네이버 소셜 로그인으로 가입시 닉네임 값에 이메일 아이디가 입력될 경우 댓글1
108 MySQL 버전 차이로 phpmyadmin 에서 DB 필드 타입 변경이 안 될 때
107 네이버 구글 검색 서브 링크
106 메인 메뉴 3차까지 추가하기
105 모바일 브라우저에서 링크 터치 하이라이트 제거 (링크 클릭 영역)
104 그누보드 5.3 기본 레이아웃 전체 가로 사이즈 변경
103 index 페이지 최신글 특정 게시판 제외하기
102 그누보드 5.2 버전과 5.3 버전 차이점
101 특정 아이피만 관리자 페이지 접근을 허용하는 방법
100 등록된 글이 없거나 페이지당 목록수보다 적어도 페이징 번호 출력하기
99 회원 가입시 닉네임 중복으로 입력할 수 있게 변경하기
98 웹호스팅 회사별 phpmyadmin 접속 링크
97 게시판 wr_id 값 초기화
96 비회원도 추천, 비추천 가능하게
95 그누보드 5.3 기본 레이아웃에서 우측 aside 영역 삭제하기
94 투표 참가 인원 닉네임으로 출력
93 자동등록방지(kcaptcha) 캽챠 음성 안내 삭제하기 - 그누보드 5.3
92 스마트 에디터 글쓰기 textarea 높이 수정하기
91 썸네일 이미지 출력할 때 여백 없이 사용하기
90 문자열 글자 자르기 cut_str 함수
게시물 검색


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

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