코딩할 때 이미지 아이콘 보다 폰트 아이콘이 더 효율적인 경우가 많습니다.
아이콘 폰트를 사용하는 간단한 방법을 알아봅니다.
순서
CDN 코드 카피
코드에 CDN 페이스트
아이콘 서치
아이콘 선택
아이콘 코드 카피
코드에 아이콘 코드 페이스트
대략 이 순서대로 진행하면 됩니다.
아마도 이런 코드가 될것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>폰트 어썸</title>
<style>
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<nav>
<ul>
<li>
<i class="fa-solid fa-house-chimney"></i>
<a href="#">메뉴1</a>
</li>
</ul>
</nav>
</body>
</html>
아래 그림대로 따라해 보세요~
CDN 코드 페이스트
https://cdnjs.com/libraries/font-awesome
맨 위에 카피링크태그 클릭 - 코드 카피
코드 상단에 페이스트
필요한 아이콘 코드 카피
네비 아이콘스 클릭
필요한 검색어 서치
필요한 아이콘 클릭
코드 카피
사용할 라인에 페이스트
----
end
Screenshot 2025-05-23 at 01.40.37.PNG
0.06MB
Screenshot 2025-05-23 at 01.45.20.PNG
0.32MB
Screenshot 2025-05-23 at 01.45.36.PNG
0.14MB
Screenshot 2025-05-23 at 01.45.58.PNG
0.08MB
Screenshot 2025-05-23 at 01.46.21.PNG
0.06MB
'New' 카테고리의 다른 글
| JS console.log - 자바스크립트 데이터 콘솔로 체크하기 (0) | 2025.06.21 |
|---|---|
| Node.js install (0) | 2025.06.19 |
| bootstrap install setting manual (0) | 2025.02.24 |
| CMD n Powershell setting (0) | 2025.02.22 |
| my directory setting (0) | 2025.02.07 |