• 사이트 전체 공지사항 테스트
    일주일 동안 열지 않기

홈페이지 만들기 팁, 정보 게시판입니다.

  • 목록
  • 아래로
  • 위로
  • 쓰기
  • 검색

Feather 아이콘 적용하기

  • 이윰
  • 59
  • 0

https://feathericons.com/


소개

무료 아이콘 feathericon를 Font Awesome처럼 사용하는 방법입니다.

색이 채워져 있지 않고, 라인으로만 된 디자인으로 깨끗하고 귀엽죠. Font Awesome이 조금 지겨웠다면 Feather를 사용해 봅시다.

방법

위 링크의 스크립트를 에디터를 열어 복사 붙여넣기를 하고 저장합니다.
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 아이콘 목록은  사이트에서 참조 

공유

facebooktwitterpinterestbandkakao story
퍼머링크

댓글 0

권한이 없습니다. 로그인

신고

"님의 댓글"

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

삭제

"님의 댓글"

cmd_comment_do 삭제하시겠습니까?