웹 퍼블을 하면서 수많은 아이콘과 이미지들을 정리하고 다루는 건 정말 귀찮은 일인 것 같습니다...
정리하는 걸 잘 못하는 저에게 있어서
아이콘과 이미지를 일일히 네이밍하고 분류하여 정리하는 건 javascript를 공부하는 것 보다 더 고역입니다.
그런 저에게 있어서 Remix Icon 사이트는 구세주나 다름없답니다!
Remix Icon 사이트의 아이콘들은 모두 저작권 무료이므로
걱정없이 사용하셔도 됩니다.
해당 글에 따르면 자유롭게 사용해도 괜찮고 본인 프로젝트에 "Remix Icon"을 언급해주면 매우 고맙겠지만 필수는 아닙니다. 다만, 아이콘들을 판매해서는 안됩니다. 라고 적혀있습니다.
천사같은 분들이네요 ><
박수 세번 짝짝짝
remix 아이콘 사이트가 마음에 드는 점 중 첫번째는
아이콘 디자인이 트랜디 하다는 점입니다.
그동안 봐왔던 오픈소스 사이트의 아이콘 디자인들에 비해서 깔끔하고 트랜디한 디자인이라
적용하고 나면 사이트가 더욱 예뻐보이는 느낌이 들더라구요
아이콘을 클릭하면 이렇게 Copy 할 수 있도록 뜹니다.
하단에서는 색상과 사이즈를 미리 설정할 수 있고
그냥 다운받아도 CSS로 재설정 할 수 있답니다.
(CSS로 사이즈 조절 시 font-size로 조절하면 됩답니다.)
그리고 필요에 따라 SVG로 복사하거나
PNG, SVG 로 다운받을 수 있으니
작업 형태에 따라 맞춰서 다운받으면 될 것같아요!
그런데, 여기서
html에 그냥 <i class="ri-shopping-bag-line"></i> 를 적용한다고
아이콘이 바로 뜨지 않는답니다.
그럼 어떻게 해야하나??
상단 네비게이션의 download 버튼을 누르면 이런 창이 뜨는데 여기서 필요에 따라 다운 받으시면 됩니다.
근데 저는 이렇게 적용하지 않았어요.
이렇게 파일을 다운받아서 적용하는 방법도 있지만
링크를 삽입하여 적용하는 방법도 있답니다.
앞서 말했듯이 파일 저장해서 코드에 연결하고..이런거 너무 귀찮아서(귀차니즘 좀 고쳐라..;)
remix 상단 네비게이션에 Get Started 를 눌러서 창을 이동하면 새로운 창이 뜹니다.
거기서 CDN을 복사하여 html 에 삽입하였답니다.
CDN을 연결 후 원하는 아이콘을 복사 붙여넣기 하면
아이콘 적용 끝!
그리고 마지막으로 체크해야 할 게 있어요!
remix 아이콘 사이트를 개발하신 두분을 체크하고 가실게요~!ㅎㅎ
수익을 창출하지 않고 이렇게 오픈소스로 제공해주는게 너무 감사하네요
상단의 Donate 버튼을 누르면 기부를 할 수도 있으니
원하시는 분은 기부하는 것도 좋을 것 같네요 ㅎㅎ
그럼 저희가 이렇게 오픈소스를 사용할 수 있게 만들어주신 디자이너님과 개발자님께 감사인사를 드리며
포스팅을 마치도록 하겠습니다.(꾸벅)
두사람이 만들었다니..대단하지 않나요?
우리도 언젠간 멋진 프로젝트를 만들어보자구요 ㅎㅎ
그럼 오늘도 끝!