• 다크모드 ↔ 라이트모드 변경 방법 일주일 동안 열지 않기

블로그/웹사이트

홈페이지, 블로그 꾸미기 팁 정보 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 댓글 0개
  • 검색
  • 라이트모드

Feather 아이콘 적용하기

이윰
341 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
normal
  27
+1
normal
  32
0
normal
  32
+1
image
  166
+1
image
  187
+1
normal
  287
+1
image
  181
+1
image
  152
0
normal
  142
0
normal
  173
+1
normal
  698
+1
normal
  155
+1
normal
  298
+1
image
  180
+1
normal
  228
+1
normal
  185
+1
normal
  209
+2
image
  391
0
normal
  502
+2
image
  161