티스토리 뷰

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
블로그에 CSS 아이콘 쓰기  (0) 2018.01.02
티스토리에서 마크다운 글쓰기  (2) 2017.11.23
반응형 스킨과 저품질의 상관성  (0) 2017.10.12
css font 속성  (0) 2017.09.26
댓글
댓글쓰기 폼