8강 - before 나 after 에 폰트어썸 아이콘 넣기

• CODEPEN - 폰트어썸

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />


<ul>
    <li><i class="fa-brands fa-instagram"></i> instagram</li>
    <li><i class="fa-brands fa-facebook"></i> facebook</li>
    <li><i class="fa-brands fa-youtube"></i> youtube</li>
    <li><i class="fa-brands fa-github"></i> github</li>
</ul>

<br>

<ul class="border_wrap">
    <li><i class="ico fa-brands fa-instagram"></i> instagram</li>
    <li><i class="ico fa-brands fa-facebook"></i> facebook</li>
    <li><i class="ico fa-brands fa-youtube"></i> youtube</li>
    <li><i class="ico fa-brands fa-github"></i> github</li>
</ul>

---

• CODEPEN
  [html code]

<!-- 폰트어썸 라이브러리 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

<i class="fa-brands fa-github"></i>
<i class="fa-solid fa-hippo"></i>
<hr>
<div>
    안녕
    <span></span>
</div>

---

[css code]

div > span::after {
     content: "\f09b";
        font-family: "Font Awesome 6 Brands";
        font-weight: 400;
}
div:hover > span::after {
    content : "\f69d";
}