더보기
fontawesome이라는 사이트 가입 후, 주어진 링크를 받아서 바로 붙여넣기하면 script로 들어감.
사용하고싶은 아이콘 이름을 넣어주고 사용하면 끝!
<!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">
<title>아이콘 예제</title>
<script src="https://kit.fontawesome.com/4bb639362a.js" crossorigin="anonymous"></script>
<style>
.fa-angellist{font-size: 30px; color:red;}
</style>
</head>
<body>
<i class="fab fa-angellist"></i>
</body>
</html>
더보기
position: absolute; top:-1px; right: -1px; => right -1을 하니까 위치가 오른쪽으로 바로 넘어왔어
(float right따위 필요도 없이.. )
<!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">
<title>아이콘 예제</title>
<script src="https://kit.fontawesome.com/4bb639362a.js" crossorigin="anonymous"></script>
<style>
.menu{height: 50px; border: 1px solid red; position: relative;}
.fa-bars{color: blue; font-size: 40px; line-height: 50px;
text-align: center; border: 1px solid red; display: block;
height: 50px; width: 50px; cursor: pointer; position: absolute;
top:-1px; right: -1px;}
.fa-bars:hover{background-color: lightcyan; border: 1px solid blue;}
</style>
</head>
<body>
<div class="menu">
<i class="fas fa-bars"></i>
</div>
</body>
</html>'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_다단(column-span모름) (0) | 2021.06.13 |
|---|---|
| CSS_길이(max-width/height, min-width/height) (0) | 2021.06.13 |
| CSS_상단, 좌측 메뉴바 만들기 (0) | 2021.06.13 |
| CSS_애니메이션 효과 (0) | 2021.06.13 |
| CSS_네이버 검색창 만들기 (0) | 2021.06.13 |