728x90
무료아이콘 웹에 적용하기
(FONT AWESOME)
01. FONT AWESOME에 접속 후 회원가입 후 로그인
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
02. 「Your kits」를 클릭
03. 「Add a New Kit」를 클릭 후 키트를 생성(기 생성한 키트가 있다면 기존 키트를 사용)
04. html의 head부분에 이하코드를 삽입
<script src="https://kit.fontawesome.com/[03에서 생성한 키트명].js" crossorigin="anonymous"></script>
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
...
<!-- icon 적용-->
<title>Bookbyte</title>
{% block head-content %}{% endblock %}
</head>
<body>
{% include 'nav_bar.html' %}
<div class="header">
{% block body-content %}
{% endblock %}
</div>
</body>
</html>
05. icons를 클릭 후 원하는 아이콘을 찾거나 검색
06. 아이콘을 삽입하고 싶은 부분의 html에 i 태그 코드를 삽입
728x90
'03_Web' 카테고리의 다른 글
| [css]마우스오버 효과(마우스 커서 올릴 때 hover 효과) (3) | 2025.05.30 |
|---|---|
| [Django]부트스트랩(Bootstrap)을 활용한 form디자인 (1) | 2025.05.27 |
| [Django]로그인 기능 구현 (4) | 2025.05.23 |
| [Django]Paginator를 활용한 페이징(paging) (3) | 2025.05.22 |
| [Django]장고 템플릿 태그 주석 다는법 (0) | 2025.05.22 |