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

아이콘을 추가하는 방법

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

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>


목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
2861
신입 개발 ->디자인 ->퍼블로 왔습니다! 4
2849
jQuery Tree 를 만들었습니다.~~ 2
2828
퍼블리셔 수습기간인데 질문드립니다. 12
2824
기타 swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현 1
2820
기타 많이들 사용하시는 Slider 에 대해서... 3
2814
기타 텝메뉴 상단고정 및 해당위치 스크롤 5
2813
기타 유튜브 재생 중인 팝업 레이어 숨길 때 재생 멈추는 방법 2
2808
반응형 반응형 코딩할때 height:100% 에 관해서... 3
2807
기타 ie 와 크롬 폰트 부분해결할 수 있는건지좀 알려주시면 감사드립니다. 1
2802
CSS 당신은 모를 수도 있는 CSS의 7가지 단위 4
2795
HTML 모바일 작업시 숫자인식,메일주소, 지도상의 주소링크 막기
2787
기타 구글의 material design에 관한 설명입니다. 4
2783
CSS css가 충돌이 됬을때 4
2781
HTML HTML Canvas 2D Context
2776
HTML HTML5 자바스크립트 API 1
2771
기타 ShadowDOM Visualizer
2757
반응형 각 해상도별 테스트. 8
2756
HTML 결제모듈과 구글웹사이트 번역 엘리먼트
2755
HTML 팁] 모바일에서 문자보내기 2
2754
반응형 짧고 굵은거 1
2748
반응형 반응형 가변(가로, 세로) 아이프레임 제이쿼리 플러그인 13
2739
기타 계륵.. css3, jquery 를 이용한 랜덤 돌림판 포인트게임
2736
CSS 익스8이하에서 css3을 사용하기 3
2734
CSS 레이어팝업 가로 중앙 위치 시키기 3
2731
기타 ie8에 font awesome 적용 방법 6
2730
HTML 팁]모바일에서 전화 걸기 1
2729
기타 파비콘 넣는 방법이에요. 1
2726
CSS css !important 의 활용 3
2724
CSS sprite 이미지를 css코드로 변환해주는 웹도구 3
2722
기타 영역 스크롤 질문드립니다. 1
이전 다음
전체 목록