개인 사이트를 제작중,
이런 소셜아이콘을 집어넣을 수 있는 방법을 찾게되어 공유하려 한다
먼저 해당 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
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
해당 사이트에서 찾으면 되는데
종류가 상당히 다양하다.
종류도 상당히 많이 지원하니 찾아보면 좋을 것 같다!
'유용한 웹사이트' 카테고리의 다른 글
[개발노트] 터미널 워치페이스 애플워치3 적용기 (2) | 2022.08.22 |
---|---|
[Oracle cloud] 오라클 클라우드 free tier 인스턴스 (0) | 2022.08.18 |
[프로그램 추천] 유튜브 뮤직 클라이언트 (pc앱) 3종류 (0) | 2022.03.04 |
[Bootstrap] bootstrap 템플릿 사이트 추천 (0) | 2021.12.29 |
ERD그리기 좋은사이트 (졸작 , 협업용) (0) | 2021.05.01 |