[ Github Pages ] 포트폴리오 사이트 만들기 (2) :: 아이콘 추가하기

 

포트폴리오에 지금까지의 공부한 자료들을 모아둔 깃허브나 개발블로그 등을 추가하고 싶을 때 아이콘을 불러올 수 있습니다.

 

---

1. 아이콘 사이트 접속하기

https://icon-sets.iconify.design/

Open Source Icon Sets - Iconify

 

저는 iconify.design사이트를 참고하였습니다.

 

 

---

2. 원하는 아이콘 검색하기

 

원하는 사이트의 아이콘을 검색하게 되면 결과가 나타날 것입니다. 저는 첫번째 아이콘을 사용해보도록 하겠습니다.

 

 

여기서 Components > Iconify Icon 을 선택하면 <iconify-icon icon="mdi:github"></iconify-icon>이 나타날 것입니다.

여기서 icon=" 여기에 들어가는 이름 " 을 사용할 예정이에요

** mdi:github → 사용할 아이콘 이름 **

 

---

3. 코드에 추가하기

<div class="icon">
    <a href="https://github.com/shyunu" target="_blank">
    	<span class="iconify" data-icon="mdi:github" data-inline="false"></span>
    </a>
</div>
<script src="https://code.iconify.design/2/2.1.2/iconify.min.js"></script>

 

◦ a태그로 아이콘span태그 감싸고 아이콘 누르면 링크 이동

◦ span 태그에 data-icon에 사용할 아이콘 이름 넣기

◦ script 태그 추가하기

 

 

여기까지 해주시면 원하는 아이콘이 잘 적용된 것을 확인할 수 있습니다  :) 😆

( 아이콘보다 큰 파란색 원은 제가 추가적으로 작업한 것이므로 아이콘이 추가된 것만 확인해주세요 )

---

 

** 추가적으로 원하는 사이트 아이콘이 있다면 검색 후 반복해주세요 **