html에서 아이콘을 불러와서 원하는대로 사용해보자.
무엇을 해볼까?
간단하게 오늘 온도가 추우니 기온이 궁금하다
자자 온도계를 꺼내서 써보자
우선 아이콘을 찾을 링크를 알려줘야한다.
https://cdnjs.com/libraries/font-awesome
font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make
cdnjs.com
에 들어가서 라이브러리를 복사하자
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
위사이트에 들어가면 검색창이 하나 뜬다
거기다가 원하는 아이콘인 temperature을 검색해준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" type='text/css' rel='stylesheet'>
<title>아이콘</title>
</head>
<body>
<i class="fa-solid fa-temperature-three-quarters"></i>
</body>
</html>
온도계 모양이 잘나온다.
이것을 크게 해볼려면 뒤에다 fa-5x를 입력하자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" type='text/css' rel='stylesheet'>
<title>아이콘</title>
</head>
<body>
<i class="fa-solid fa-temperature-three-quarters fa-5x"></i>
</body>
</html>
파란색 온도계를 만들고 싶다면~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" type='text/css' rel='stylesheet'>
<title>아이콘</title>
</head>
<body>
<span style="color: blue">
<i class="fa-solid fa-temperature-three-quarters fa-5x"></i>
</span>
</body>
</html>요렇게 입력하면 커다란 파란색 온도계가 완성이다.
'프로그래밍 > Web [HTML]' 카테고리의 다른 글
| 폰트 편 - 간단하게 설정하자 (0) | 2022.12.02 |
|---|---|
| 체크 박스 편 - 모양만 만듭니다. (0) | 2022.12.02 |
| 등급 분류 모양 만들기 (0) | 2022.12.01 |
| margin 편 (0) | 2022.12.01 |
| Visual Studio Code - 설치방법 (0) | 2022.11.26 |
