feather icon을 이용해서, 웹에서 예쁜 아이콘 사용하기.
최대 1 분 소요
what is feathericon??
- 일단은, 처음에는 웹페이지를 만들때 보통 그냥 텍스트 중심으로 만들게 됩니다. 물론, 텍스트만으로도 충분히 예쁘게 만들 수 있지만, 썩 성에 차지는 않아요.
- 다행히도, 이 아름다운 세상에는 icon 조차 오픈소스로 풀려 있는 경우가 많습니다. feathericon이 그 아름다움을 지원합니다 하하핫.
- 아무튼, 이 아이콘들을 이용하면, 웹페이지를 생각보다 훨씬 예쁘게 만들 수 있습니다.
do it
- documentation에 가면 자세한 사용법들이 정리되어 있습니다.
- 아래와 같이 html 문서의 head부분에서 script로 소스를 가져오고,
- 필요한 부분에 tag의 속성으로
data-feather="circle"을 집어넣고,
- 맨 아랫줄에
feather.replace()라는 부분을 집어넣어줍니다.
- 저의 경우는 앞 뒤 부분은 모두
layout.html에 집어넣고, 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<!--CDN으로부터 feather-icon들을 가져옴-->
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body>
<!-- example icon -->
<i data-feather="circle"></i>
<!--맨 아랫줄에 이 라인을 집어넣으면 html페이지를 만든 다음 해당 부분은 icon으로 변경해줌-->
<script>
feather.replace()
</script>
</body>
</html>
wrap-up
- 필요한 아이콘들을 편하게 사용할 수 있습니다 하하핳.
댓글남기기