WEB/HTML ,CSS,PHP

[μ›Ή] css μ•„μ΄μ½˜ 링크 μ‚½μž… , <a> 밑쀄 μ—†μ• κΈ°

솑이 🫧 2020. 8. 24. 22:55

 

 

https://fontawesome.com/icons?d=gallery

 

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

ν•΄λ‹Ή 링크에 λ“€μ–΄κ°€ μ›ν•˜λŠ” μ•„μ΄μ½˜μ„ ν΄λ¦­ν•˜λ©΄ μ•„λž˜μ™€ 같은 λ²„νŠΌμ΄ 뜰 것이닀. 

 

 

λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ μ•„λž˜μ™€ 같이 볡사할 μ½”λ“œκ°€ 뜰 것이닀. 

 

<head>에 μ•„λž˜ μ½”λ“œλ₯Ό μž…λ ₯해두어야 μ•„μ΄μ½˜μ„ μ‚¬μš©ν•  수 μžˆλ‹€. 

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

μ•„μ΄μ½˜

>> μ•„μ΄μ½˜ 밑쀄을 μ—†μ• λ €λ©΄ text-decoration 을 none으둜 μ£Όλ©΄ λœλ‹€.

<a style="text-decoration:none" // 밑쀄 μ—†μ• κΈ° μœ„ν•œ μ½”λ“œ 
href="μ—°κ²°ν•˜κ³  싢은 링크" class="fab fa-instagram fa-5x"></a>
//fa-5x의 경우 ν¬κΈ°μ‘°μ ˆμ΄λ―€λ‘œ μƒλž΅ κ°€λŠ₯

이제 ν•΄λ‹Ή μ•„μ΄μ½˜μ„ λˆ„λ₯΄λ©΄ 연결해놓은 링크둜 λ“€μ–΄κ°ˆ 수 μžˆλ‹€.