테스트 사이트 - 개발 중인 베타 버전입니다
SIR

아이콘을 추가하는 방법

컴프
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 8년 전 · 3220

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css 

위 css를 이용한 아이콘 추가


아이콘을 추가하는 방법


아이콘을 삽입하려면 아이콘 클래스의 이름을 인라인 HTML 요소에 추가하십시오.


<i>및 <span>요소 널리 아이콘을 추가하는 데 사용됩니다.


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


글꼴 굉장 아이콘

글꼴 썸네일 아이콘을 사용하려면 <head>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>




<!DOCTYPE html>

<html>

<head>

<title>Font Awesome Icons</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

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

</head>

<body>


<p>Some Font Awesome icons:</p>

<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>


<p>Styled Font Awesome icons (size, color, and shadow):</p>

<i class="fa fa-cloud" style="font-size:24px;"></i>

<i class="fa fa-cloud" style="font-size:36px;"></i>

<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>

<i class="fa fa-cloud" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;"></i>


</body>

</html>


목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
2407
CSS ios 에서 input 스타일 초기화 5
2399
기타 modern.ie 일종의 ie 테스터? 2
2397
CSS 웹표준코딩에 필요한 지식 참고하세요. 5
2379
기타 크로스브라우징? 이제 크롬에서 하나로 확인하자 18
2362
웹접근성 자바스크립트를 끈 로그인 폼 15
2359
기타 HTML5 기반 에니메이션 제작을 위한 Adobe Edge 3
2358
CSS IE6/7 img px 버그
2346
반응형 참고해서 만들어 본 반응형 레이아웃 7
2332
CSS 팁은 아닌데 그냥 제가 자주쓰는 버튼 css 5
2329
웹접근성 html / css 버튼 만들어 주는 사이트. 자주 활용합니다^^; 편리성 9
2326
HTML IE6 PNG 초 간단하게 적용 3
2325
HTML HTML5 placeholder 사용하기 1
2322
CSS 제가 사용하는 CSS RESET (초기화) 3
2321
HTML <img> 태그 올 바르게 사용하기. 8
2317
CSS 모바일/테블릿의 @font-face 지원여부 2
2312
웹접근성 웹접근성이란? 3
2309
웹접근성 웹표준형 화면 확대/축소 8
2308
CSS 익스플로러에서 CSS3의 컬러속성을 필터로 사용하도록 변경해주는 사이트
2305
웹접근성 접근성을 고려한, 컨텐츠를 가리는 방법 4
2301
CSS 그라디언트 에디터 7
2300
HTML 파비콘(favicon) 만들어 넣기 2
2293
CSS css를 이용한 2차 메뉴입니다. 7
2288
기타 고수님들 사이트오류(레이어팝업) 좀 봐주세요 ㅠ.ㅠ 4
2281
HTML object 태그 질문 드ㅡ립니다 2
2276
HTML [HTML5] classList api 클래스 변경 api 1
2273
기타 필요에 따라 자스/css 불러왔다 내보내기 3
2270
CSS 가상클래스 순서 외우기 3
2263
HTML 넌 이제 오빠꺼야, embed 동영상 위의 div 표시문제 8
2261
반응형 반응형웹 패턴/리소스/뉴스 4
2258
CSS CSS에 attr 함수에 대해 3
이전 다음
전체 목록