[html] 소셜 아이콘 집어넣기

개인 사이트를 제작중,

이런 소셜아이콘을 집어넣을 수 있는 방법을 찾게되어 공유하려 한다

 

먼저 해당 div의 css코드 먼저 공유하려한다. <div class = "social icons">

[css code]

.social-icons .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #495057;
  color: #fff;
  border-radius: 100%;
  font-size: 1.5rem;
  margin-right: 1.5rem;
}
.social-icons .social-icon:last-child {
  margin-right: 0;
}
.social-icons .social-icon:hover {
  background-color: #bd5d38;
}

[html code]

<!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
<!--헤드에 추가할 것!-->        



<div class="social-icons">
    <a class="social-icon" href="#!"><i class="fas fa-pen-fancy"></i></a>
    <a class="social-icon" href="#!"><i class="fab fa-github"></i></a>
    <a class="social-icon" href="#!"><i class="fab fa-twitter"></i></a>
    <a class="social-icon" href="#!"><i class="fab fa-facebook-f"></i></a>
</div>

 

i class 내부 값은 

https://www.w3schools.com/icons/fontawesome5_icons_business.asp

Font Awesome 5 Business Icons

해당 사이트에서 찾으면 되는데

종류가 상당히 다양하다.

 

종류도 상당히 많이 지원하니 찾아보면 좋을 것 같다!