재단 아이콘

이전 : 국제 교류 재단 버튼 그룹

다음 : 재단 태그

재단은 CSS를 사용하여 스타일의 크기를 정의 할 수 있습니다, 283 아이콘을 제공합니다.

아이콘 등의 텍스트, 버튼, 툴바, 탐색 형태를 위해 사용될 수있다.

아이콘 재단의 예는 다음과 같습니다

버튼 새로 고침 :

검색 아이콘 :

홈 아이콘 :

구문 아이콘

다음과 같이 작성 아이콘 구문은 다음과 같습니다

<i class="fi-name"></i>

이름의 아이콘 이름 부분을 교체합니다.

우리는 <헤드>를 필요로 아이콘을 사용하려면 섹션은 아이콘 스타일 파일을 추가합니다 :

<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">

아이콘 예

하기 실시 예는 아이콘의 사용을 보여 :

예

클라우드 아이콘 : 
링크로 클라우드 아이콘 :
href가 = "#"> <내가 클래스 = "FI-구름"> </ A>

 스타일 된 클라우드 아이콘 : < 내가 클래스 = "FI-구름"스타일 = "글꼴 크기 : 35px; 색상 : 빨강;"> 
 Home (홈) 아이콘 : <I의 클래스 = "FI-홈"> 
버튼에 홈 아이콘 :
<버튼 유형 = "버튼"클래스 = "버튼">
 홈
</ 버튼>

녹색에 홈 아이콘 버튼 :
<버튼 유형 = "버튼"클래스 = "버튼을 성공">
 홈
</ 버튼>

대형에 홈 아이콘 , 밝은 파란색 링크 버튼 :
href가 = "#" 클래스 = "button 정보 large">
 홈
</ A>

»시도

도구 모음 아이콘

우리는 사용할 수 .icon-bar 도구 모음 아이콘의 지정된 번호를 생성하는 클래스를 :

예

<사업부 클래스 = "아이콘 바 오 - 업">
href가 = "#" 클래스 = "item">
<= "FI-홈 I 클래스 "> 
</ A>
href가 = "#" 클래스 = "item">
 
</ A>
href가 = "#" 클래스 = "item">
 
</ A>
href가 = "#" 클래스 = "item">
 
</ A>
href가 = "#" 클래스 = "item">
 
</ A>
</ DIV>

»시도

아이콘 설명을 사용하여 <label> 요소 :

예

<사업부 클래스 = "아이콘 바 오 - 업">
href가 = "#" 클래스 = "item">
<= "FI-홈 I 클래스 "> 
<레이블> 홈 </ 라벨>
</ A>
href가 = "#" 클래스 = "item">
 
<레이블> 공유 </ 라벨>
</ A>
href가 = "#" 클래스 = "item">
 
<레이블> 정보 </ 라벨>
</ A>
href가 = "#" 클래스 = "item">
 
<레이블> 메일 </ 라벨>
</ A>
href가 = "#" 클래스 = "item">
 
<레이블> 검색 </ 라벨>
</ A>
</ DIV>

»시도

.disabled 클래스는하지 클릭 아이콘 상태가 될 수 있습니다 :