Font Awesome 아이콘을 사용하기

*.jsp 에서 사용할 아이콘 사용하기

1️⃣ Font Awesome 사이트 회원가입 및 로그인
https://fontawesome.com/

Font Awesome

 

2️⃣ 로그인 후 Your Kits

 

3️⃣ 로그인을 하게되면 개인으로 주는지 모르겠지만 key를준다

제공받은 코드를 *.jsp 파일 상단에 입력

 

4️⃣ 아이콘은 무료버전 , 유료버전이 존재  - ( PRO  유료 )

 

5️⃣ 아이콘 적용하기

 

📌 바로 앞에서 말했듯이 PRO 는 유료 버전이니 아무런딱지가 없는 아이콘을 적용해보자

6️⃣ 여러 옵션 조절

• 옵션 조절
• 아이콘 크기 조정
• 아이콘 회전 
  대략 이정도 사용 해봤고 다른 기능은 모르겠다.

 

7️⃣ 

	<i class="fa-brands fa-github fa-2xl" style="color: #000000;"></i>

• 사이즈 2xl
• 색상 - 배경색상이 검정색이라 흰색사용

<div class="col-content term-content">
    <a href="https://www.instagram.com/gi.dor/" >
        <i class="fa-brands fa-square-instagram fa-2xl" style="color: #000000;"></i>
    </a>
    &nbsp;
    <a href="https://gi-dor.tistory.com/" >
        <i class="fa-brands fa-blogger fa-2xl" style="color: #000000;"></i>
    </a> 
    <a href="https://github.com/gi-dor" >
        <i class="fa-brands fa-github fa-2xl" style="color: #000000;"></i>
    </a>
</div>

 

8️⃣ 실제 적용 화면