안녕하세요 김다이아 에요
오늘은 웹상에서 무료로 아이콘을 사용할 수 있는
방법에 대하여 알아 보도록 할게요
기본적으로 제공해주는 것도 있지만
제공해주는 것 이외에
조금 더 다양한 아이콘을 사용하고 싶으시다면
아래의 내용 방법을 추천해드려요
첫 번째
───── ❝ 구글 무료 아이콘 (icon) 이용하는 방법 ❞ ─────
사이트 : https://fonts.google.com/icons
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
사이트에 들어가시면 가입 없이 무료로 사용할 수 있고
검색창을 통해서 원하는 아이콘을 쉽게 검색할 수 있어요
저는 티스토리에서 제공해주는 메뉴에 아이콘을 넣고 싶어서
home이라는 글자 부분에 아이콘을 넣어 볼 거예요
제가 원하는 아이콘이 저기 딱 하니 보이네요
home 아이콘을 클릭하면
오른쪽에서 창 하나가 나타나요
여기서 아래 사진처럼 <link> 부분을 복사하여
<html> 안에서 <head> </head> 사이에 해당
내용을 복사해서 넣어 주세요
그다음 <span> 태그를 복사를 해주세요
<span class="material-symbols-outlined">
home
</span>
<nav> 태그 안에다가 넣어줬어요
초보자분들도 쉽게 사용할 수 있어서
생각보다 어렵지 않아요
복사하신 다음 저장 후 새로고침 해주시면
아이콘으로 변경된 것을 확인할 수 있어요
[변경 전]
[변경 후]
───── ❝ font awesome 무료 아이콘 (icon) 이용 하는 방법 ❞ ─────
사이트 : https://fontawesome.com/
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
font awesome는 유료와 무료 버전이 있지만
무료 버전으로 충분히 원하는 아이콘을 사용할 수 있어요
우선 font awesome 사이트를 이용하시려면
가입이 필요해요
메인 페이지에서 Start for Free 클릭하세요
사용 중인 이메일 주소를 입력하고 Send Kit Code를 누르면 입력한 이메일로
이메일 주소 확인 메일이 가요
font awesome 사용할 수 있도록 패스워드 입력하라는 부분을 클릭해요
그러면 회원가입은 끝이 나요
회원가입이 끝나면 사이트 메인 화면에서 Kits 부분을 클릭하시면 다른 화면으로 넘어가게 되고
생성된 kits 코드를 확인할 수 있어요
kits 코드를 복사를 한 뒤 <html> 안에서
<head> </head> 사이에 코드를 넣어 주세요
그다음 사이트 메뉴에서 Icons를 클릭하게 되면
유료와 무료로 둘 중 어느 것을
선택할 것인가에 대하여 설명이 나와요
저는 무료로 사용을 할 예정이어서
free and open-source icons를 눌렀어요
여러 개의 아이콘들 중에서 저는 홈 아이콘을 먼저 변경해 보도록 할게요
홈 아이콘을 클릭하게 되면 창하나 가 떠요
그중에서 <html>에 적용할 <i> 태그를 복사를 해요
그다음 <nav> 태그 안에 <i> 태그를 삽입해줘요
복사 넣기 한 다음 저장버튼을 클릭해주신 후
변경된 아이콘을 보기 위해서 블로그 새로고침을 눌러주시면
변경된 아이콘을 확인할 수 있어요
[변경 전]
[변경 후]
이렇게 무료로 아이콘을 변경해 보니
제 블로그가 많이 예뻐져서 뿌듯해지네요 ㅎ
*쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다.*
'공부방 > 기타' 카테고리의 다른 글
| 챗GPT를 이용하여 블로그 글을써보기 (4) | 2023.02.13 |
|---|