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

아이콘을 추가하는 방법

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3199
CSS skewX () 메서드 , skewY () 메서드, skew () 메서드
3198
CSS scale () 메서드
3197
CSS rotate () 메서드
3196
CSS CSS3 2D변환 - translate() 메서드
3195
CSS CSS3 단어 속보
3194
CSS CSS3 워드 래핑
3192
CSS css 굵은 글씨 사용
3191
CSS css 원하는 글꼴 사용하기
3190
CSS CSS3 웹 폰트 - @ font-face 규칙
3189
CSS CSS3 텍스트 오버플로 세번째
3188
CSS CSS3 텍스트 오버플로 두번째
3187
CSS CSS3 상자 그림자 속성
3186
CSS CSS3 그림자 효과 다섯번째
3185
CSS CSS3 그림자 효과 네번째
3184
CSS CSS3 그림자 효과 세번째
3183
CSS CSS3 그림자 효과 두번째
3182
CSS CSS3 그림자 효과
3181
CSS CSS3 그라디언트 방사형 그라데이션 반복
3180
CSS CSS3 그라디언트 다른 크기의 키워드 사용
3179
CSS CSS3 그라디언트 모양 설정
3178
CSS CSS3 방사형 그라디언트 - 다른 간격의 색상 정지
3177
CSS CSS3 그라디언트 두번째
3176
CSS CSS3 그라디언트
3175
CSS CSS3 Colors
3174
CSS CSS3 background-clip 속성
3173
CSS CSS3 background-origin 속성
3172
CSS css3 전체 크기 배경 이미지
3171
CSS css3 여러 배경 이미지의 크기 정의
3170
CSS CSS3 배경 크기
3169
CSS CSS3 다중 배경
이전 다음
전체 목록