มูลนิธิไอคอน

ก่อนหน้านี้: มูลนิธิกลุ่มปุ่ม

ถัดไป: มูลนิธิแท็ก

มูลนิธิให้ 283 ไอคอนคุณสามารถกำหนดขนาดของรูปแบบของการใช้แบบ CSS

ไอคอนสามารถนำมาใช้สำหรับข้อความ, ปุ่มแถบเครื่องมือนำทาง, รูปแบบและอื่น ๆ

ต่อไปนี้เป็นตัวอย่างของมูลนิธิไอคอน:

ปุ่ม Refresh:

ไอคอนการตรวจสอบ:

ไอคอนหน้าแรก:

ไอคอนไวยากรณ์

สร้างไอคอนไวยากรณ์เป็นดังนี้:

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

เปลี่ยนชื่อเป็นส่วนหนึ่งไอคอนของชื่อ

หากต้องการใช้ไอคอนที่เราต้อง <head> ส่วนการเพิ่มไฟล์ไอคอนรูปแบบ:

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

ตัวอย่างไอคอน

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ไอคอน:

ตัวอย่าง

ไอคอนเมฆ: 
 ไอคอนเมฆเป็นลิงค์ :
<A href = "#"> </ A>

ไอคอน Styled เมฆ: 
 ไอคอนหน้าแรก: 
 ไอคอน Home ที่ปุ่ม :
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปุ่ม">
 หน้าแรก
</ ปุ่ม>

 ไอคอน Home บนสีเขียว ปุ่ม
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ความสำเร็จที่ปุ่ม">
 หน้าแรก
</ ปุ่ม>

 ไอคอนที่บ้านบนที่มีขนาดใหญ่ , การเชื่อมโยงปุ่มสีฟ้าอ่อน:
<A href = "#" class = ข้อมูล "button large">
 หน้าแรก
</ A>

ลอง»

ไอคอนแถบเครื่องมือ

เราสามารถใช้ .icon-bar ชั้นเรียนเพื่อสร้างตามจำนวนที่ระบุของไอคอนแถบเครื่องมือ:

ตัวอย่าง

ลอง»

ไอคอนอธิบายการใช้งาน <label> องค์ประกอบ:

ตัวอย่าง

<div class = "ไอคอนบาร์ ห้าขึ้น">
<A href = "#" class = "item">
 
<label> หน้าแรก </ label>
</ A>
<A href = "#" class = "item">
 
<label> แบ่งปัน </ label>
</ A>
<A href = "#" class = "item">
 
<label> ข้อมูล </ label>
</ A>
<A href = "#" class = "item">
 
<label> จดหมาย </ label>
</ A>
<A href = "#" class = "item">
 
<label> ค้นหา </ label>
</ A>
</ div>

ลอง»

.disabled ชั้นช่วยให้กลายเป็นไม่สามารถคลิกได้ที่ไอคอนสถานะ: