Feather 아이콘 적용하기
이윰
341 1 0
소개
무료 아이콘 feathericon를 Font Awesome처럼 사용하는 방법입니다.
색이 채워져 있지 않고, 라인으로만 된 디자인으로 깨끗하고 귀엽죠. Font Awesome이 조금 지겨웠다면 Feather를 사용해 봅시다.
https://feathericons.com/
방법
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 아이콘 목록은 사이트에서 참조
다양한 적용 방법 보기.
