나의 개발일지

폰트어썸에서 아이콘 만들기&링크생성하기 본문

CSS

폰트어썸에서 아이콘 만들기&링크생성하기

heew0n 2023. 10. 7. 00:47

Search Icons & Find the Perfect Design | Font Awesome

 

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

 

우선 나도 다른 사이트 참고하면서 쓴 거라

자세한 설명은 생략!

 

폰트 어썸에 로그인해서 아이콘 검색을 해보면 엄청 다양한 무료 아이콘이 많다

내가 필요했던 아이콘은 인스타그램과 티스로리를 나타낼 수 있는 'T' 아이콘!

 

<head> 안에다가 아래의 링크를 첨부해야 한다 (폰트어썸 6 버전임)

 

<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css
" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

 

 <div>
      <a
      style="text-decoration: none"
      href="https://www.instagram.com/hxxwxnn/"
      class="fa-brands fa-instagram fa-2xl"
      ></a>
</div>

 

class="fa-brands fa-instagram fa-2xl"

여기기서 "" 안에만 바꾸면 된다!

 

 

href="https://www.instagram.com/hxxwxnn/"

아이콘에 링크 첨부

 

 

아이콘의 밑줄을 없애기 위해 씀

 style="text-decoration: none"

 

 

사이즈 조절

fa-2xl 

 

 

 

 

 

끝이다. 생각보다 간단하다

 

 

 

 

 

저작자표시

'CSS' 카테고리의 다른 글

특성 선택자와 결합선택자에 대하여~  (0) 2023.10.10
float과 clear에 대하여~  (0) 2023.10.10
background에 대하여~  (1) 2023.10.10
display flex에 대하여~  (1) 2023.10.07
position 에 대하여~  (0) 2023.10.06
'CSS' Related Articles more