• 방명록을 남겨 주세요 :-) 일주일 동안 열지 않기
  • 다크모드 ↔ 라이트모드 변경 방법 일주일 동안 열지 않기

깨알팁

팁 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 댓글 0개
  • 검색
  • 라이트모드

웹팁 Feather 아이콘 적용하기

이윰
554 1 0

소개

무료 아이콘 feathericon를 Font Awesome처럼 사용하는 방법입니다.
색이 채워져 있지 않고, 라인으로만 된 디자인으로 깨끗하고 귀엽죠. Font Awesome이 조금 지겨웠다면 Feather를 사용해 봅시다.
https://feathericons.com/Feather

방법

feather.js
feather.min.js
위 링크의 스크립트를 에디터를 열어 복사 붙여넣기를 하고 저장합니다.
feather.js 또는 feather.min.js 파일을 내 서버의 적당한 곳에 업로드합니다.

 

예) www/html/js/feather.js

 

출력하고자 하는 html 페이지 <head></head>안에 로드시켜 줍니다.

<script src = "./js/ feather.js"> </script>

<body></body> 안에

<script>
  feather.replace()
</script>

위 코드를 삽입합니다.

 

페이지에서 Feather 아이콘 출력하는 방법

아이콘을 출력하고자 하는 곳에 아래처럼 코드를 넣어 줍니다.

<i -data-feather="circle"></i>

기본 스타일은 다음과 같습니다.

  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;

사이즈를 조절하고 싶다면 ?

<i -data-feather="circle" width="12" height="12"></i>

위처럼 원하는 사이즈를 입력해 주면 됩니다.
-data-feather 에 속성을 변경하여 아이콘을 각각 출력합니다.

 

feather 아이콘 목록은  사이트에서 참조 
다양한 적용 방법 보기.

신고공유스크랩

댓글 0

댓글 쓰기
권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크
제목 조회 수
0
image
63
0
image
291
0
normal
39
0
normal
114
+1
normal
168
0
normal
224
+1
image
342
+2
image
362
+4
normal
1103
+1
image
268
+1
image
228
0
normal
176
0
normal
200
+1
normal
1045
+1
normal
128
+5
image
253
+1
normal
245
+2
normal
1821
+1
image
298
+1
normal
314