니얼바이웹

css 아이콘 fontawesome 5.5 적용 방법

· 2018-11-25 (일) 22:47:35 · 8464 · 3

현재 그누보드5에 첨부된 font-awesome은 4.7버전입니다.
4.7에는 없고 5.5에는 있는 아이콘들을 사용하기 위해 5.5로 적용시켰습니다.
적용방법은 아래 링크를 참고하시면 됩니다.
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

다 영어죠? 간단히 적용방법을 설명드리자면 아래와 같습니다.

일단 Font Awesome Free for teh Web 다운로드


예를들어 기존처럼 js파일안에 다운로드 받은 fontawesome파일을 넣었다면
238126694_1543153073.3565.png
저는 기존 파일 이름이 font-awesome이어서
다운로드 파일 "fontawesome-free-5.5.0-web"을 font-awesome2로 변경했습니다.
 

head.sub.php파일에 코딩.
<link rel="stylesheet" href="<?php echo G5_JS_URL ?>/font-awesome2/css/all.min.css">

238126694_1543153196.5547.png

 

 

-참고-


기존 4.7적용방식을 보고 fontawesome.min.css파일을 링크시키면 될 줄 알았는데 안되더라구요.
그래서 문서 찾아봤더니 all.css파일을 링크시키라고 하더라구요. 그랬더니 잘 되더라구요.

참고로 일부 그누보드에서 사용중인 아이콘들이 안보일 수 있습니다.

일단 제가 찾은 아이콘입니다.
.fa-trash-o:before {
    content: "\f2ed";
}
.fa-arrows:before {
    content: "\f0b2";
}
.fa-star-o:before {
    content: "\f005";
}
.fa-pencil:before {
    content: "\f303";
}
.fa-copy:before, .fa-files-o:before {
    content: "\f0c5";
}
.fa-commenting-o:before {
    content: "\f27a";
}
all.css 파일에(all.min.css로 하셨다면 all.min.css에) 추가하시면 오류뜨던 아이콘들도 보일거에요.
(게시판쪽입니다.)

|

댓글 3개

2018-12-17 (월) 14:46:55
폰트 아이콘 적용방법
2020-03-12 (목) 21:11:30
좋은 정보 감사합니다. 업그레이드 해봐야겠어요~
감사합니다. 따라서 잘 업그레이드 했습니다 . 감사합니다
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
18-11-27 조회 1.1만
18-11-26 조회 8,314
18-11-26 조회 7,697
18-11-26 조회 7,797
18-11-26 조회 8,585
18-11-25 조회 8,465
18-11-25 조회 5,689
18-11-23 조회 6,492
18-11-23 조회 8,784
18-11-23 조회 7,901
18-11-23 조회 1.1만
18-11-21 조회 8,319
18-11-19 조회 6,595
18-11-18 조회 6,277
18-11-17 조회 7,427
18-11-17 조회 6,069
18-11-15 조회 5,743
18-11-14 조회 6,048
18-11-11 조회 8,615
18-11-11 조회 6,830
18-11-10 조회 6,548
18-11-04 조회 7,098
18-11-01 조회 6,942
18-11-01 조회 6,296
18-10-31 조회 8,353
18-10-29 조회 8,849
18-10-28 조회 6,747
18-10-28 조회 5,357
18-10-28 조회 5,612
18-10-24 조회 8,444