티스토리 뷰

잉고래의 티스토리

블로그에 CSS 아이콘 쓰기

잉고래 2018. 1. 2. 20:43

CSS 아이콘

블로그 글에 아이콘을 넣으면 참 글이 있어보입니다. css로 간단하게 아이콘을 추가하고 쓰는 방법입니다. 참고로 이 글은 w3schools의 원문을 번역한 것입니다. css를 공부하신다면 추천하는 곳입니다. 꼭 들러보세요. 

웹페이지에 아이콘을 추가하는 방법

HTML 페이지에 아이콘을 추가하는 가장 간단한 방법은 Font Awesome과 같은 아이콘 라이브러리를 사용하는 것입니다.

지정된 아이콘 클래스의 이름을 인라인 HTML 요소 (예 : 또는 )로 추가하십시오.

아이콘 라이브러리에있는 모든 아이콘은 CSS (크기, 색상, 그림자 등)로 사용자 정의 할 수있는 확장 가능한 벡터입니다.

벡터는 크기를 아무리 늘려도 이미지가 깨지거나 하지 않죠~

Font Awesome Icon

Font Awesome Icon을 사용하려면 HTML 페이지 의 섹션 안에 다음 행을 추가 하십시오.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

참고 : 다운로드 또는 설치가 필요하지 않습니다!


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html>

bootstrap 아이콘

부트 스트랩 글리 phicon을 사용하려면 HTML 페이지 의 섹션 안에 다음 행을 추가 하십시오.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

참고 : 다운로드 또는 설치가 필요하지 않습니다!


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

Google 아이콘

Google 아이콘을 사용하려면 HTML 페이지 의 섹션 안에 다음 행을 추가 하십시오.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

참고 : 다운로드 또는 설치가 필요하지 않습니다!

​

'잉고래의 티스토리' 카테고리의 다른 글

css list 속성 이해  (0) 2018.04.10
나만의 링크버튼 만들기  (0) 2018.02.02
티스토리에서 마크다운 글쓰기  (2) 2017.11.23
반응형 스킨과 저품질의 상관성  (0) 2017.10.12
css font 속성  (0) 2017.09.26