본문 바로가기
개발 공부/publishing

무료 움직이는 애니메이션 아이콘 사용하기 (feat.lordicon)

by 손가는대로 2024. 7. 14.
반응형

 

 

lordicon

html에 쉽게 사용 가능한 무료 애니메이션 아이콘 사이트!

움직이는 아이콘을 html에 삽입해 봅시다!

 

더브레드블루 발효종 순수 통밀빵 2개입 (냉동)

COUPANG

www.coupang.com


1.  로드아이콘 사이트에 접속하기

 

21,500+ animated icons - Lordicon

Lordicons work seamlessly with your project, responding to a range of interactions - whether in, hover, morph, loop, or more.

lordicon.com

 

2. 애니메이션 아이콘 선택하기

- 원하는 아이콘을 클릭하면 오른쪽 패널에서 아이콘 컬러를 변경, 일러스트 선두께 및 동영상 스타일을 변경할 수 있습니다.

- 사용할 리소스 파일 다운로드는 애니메이션 아이콘, 이미지 아이콘, 리소스 아이콘 형식으로 저장할 수 있습니다.

   움직이는 아이콘 : Embed Html, gif, josn(lottie), webp, apng, mp4,

   이미지 : png, svg(lottie)

   소스 : after effects project, svg, mogrt

 

3. 애니메이션 아이콘 사용하기!

// 웹에 임베드 시킬 경우
<script src="https://cdn.lordicon.com/lordicon.js"></script>
<lord-icon
    src="https://cdn.lordicon.com/rmhtxunj.json"
    trigger="hover"
    colors="primary:#913710,secondary:#ee8f66"
    style="width:1000px;height:1000px">
</lord-icon>
// 무료로 아이콘을 사용하려면 lordicon에 귀속되어야 함 
// 웹에 추가할 계획이라면 웹사이트 푸터에 링크 추가 
<a href="https://lordicon.com/">Icons by Lordicon.com</a>
 

삼립 56시간 저온숙성 탕종 숙식빵, 840g, 1개

COUPANG

www.coupang.com

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

반응형