awesome 사용
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
</head>
<body>
<i class="far fa-address-book"></i>
</body>
</html>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 11% of all websites, powered by Cloudflare. We make it faster and easier to load library files on yo
cdnjs.com
에서
- all.min.css
사용하면됨
fontawesome.com/icons?d=gallery&p=2&m=free
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
무료아이콘 사용은 여기서
<i class="fa fa-camera fa-lg"></i> <!-- 33% 크기 -->
<i class="fa fa-camera fa-2x"></i> <!-- 2배 크기 -->
<i class="fa fa-camera fa-3x"></i> <!-- 3배 크기 -->
<i class="fa fa-camera fa-4x"></i> <!-- 4배 크기 -->
<i class="fa fa-camera fa-5x"></i> <!-- 5배 크기 -->아이콘 중첩시키기
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<!--fa-twitter on fa-square-o-->
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<!--fa-flag on fa-circle-->
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<!--fa-terminal on fa-square-->
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
<!--fa-ban on fa-camera-->아이콘 회전
<i class="fa fa-spinner fa-spin fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-fw"></i>
<i class="fa fa-cog fa-spin fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-fw"></i> 반응형
'컴퓨터 > CSS+HTML' 카테고리의 다른 글
| 티스토리 오디세이 스킨에 자동목차 (TOC)넣기 (0) | 2022.01.25 |
|---|---|
| Kotlin 배우기 3주차 (0) | 2021.04.29 |
| pycham - 로컬서버돌리기 (0) | 2021.02.18 |
| 서버클라이언트 이해하기 (0) | 2021.02.17 |
| 부트스크랩 , 제이쿼리 (0) | 2021.02.17 |
댓글