ไอคอนพื้นฐาน
จะใช้แบบอักษรไอคอนน่ากลัวเพิ่มบรรทัดต่อไปนี้ภายใน <head> ส่วนของหน้าเว็บ HTML ของคุณ:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
หมายเหตุ: ไม่มีการดาวน์โหลดหรือติดตั้งจะต้อง!
คุณวางไอคอนตัวอักษรที่น่ากลัวโดยใช้คำนำหน้า fa และชื่อของไอคอน
ตัวอย่าง
รหัสต่อไปนี้:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>ผลการค้นหาใน:
ตัวอักษรที่น่ากลัวได้รับการออกแบบมาเพื่อใช้กับองค์ประกอบแบบอินไลน์ <i> และ <span> องค์ประกอบที่ใช้กันอย่างแพร่หลายสำหรับไอคอน
นอกจากนี้ยังทราบว่าถ้าคุณเปลี่ยนแบบอักษรขนาดหรือสีของภาชนะไอคอนของการเปลี่ยนแปลงที่ไอคอน สิ่งเดียวกันจะไปสำหรับเงาและสิ่งอื่น ๆ ที่ได้รับการสืบทอดมาใช้ CSS
ไอคอนขนาดใหญ่
fa-lg (33% increase) , fa-2x , fa-3x , fa-4x หรือ fa-5x ชั้นเรียนจะใช้ในการเพิ่มไอคอนขนาดเทียบกับภาชนะของพวกเขา
ตัวอย่าง
รหัสต่อไปนี้:
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
ผลการค้นหาใน:
Tip: หากไอคอนของคุณจะได้รับการตัดด้านบนและด้านล่างเพิ่ม line-height
ไอคอนรายการ
fa-ul และ fa-li ชั้นเรียนจะนำมาใช้แทนกระสุนเริ่มต้นในรายการเรียงลำดับ
ตัวอย่าง
รหัสต่อไปนี้:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>ผลการค้นหาใน:
- List icons
- List icons
- List icons
เป้และดึงไอคอน
fa-border , fa-pull-right หรือ fa-pull-left ชั้นเรียนจะใช้สำหรับการเสนอราคาในการดึงหรือไอคอนบทความ
ตัวอย่าง
รหัสต่อไปนี้:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.ผลการค้นหาใน:
ไอคอนภาพเคลื่อนไหว
fa-spin ระดับได้รับไอคอนใด ๆ ที่จะหมุนและ fa-pulse ระดับได้รับไอคอนใด ๆ ที่จะหมุนด้วยขั้นตอนที่ 8
ตัวอย่าง
รหัสต่อไปนี้:
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i
class="fa fa-spinner fa-pulse"></i>
ผลการค้นหาใน:
หมายเหตุ: IE8 และ IE9 ไม่สนับสนุนภาพเคลื่อนไหว CSS3
หมุนและพลิกไอคอน
fa-rotate-* และ fa-flip-* เรียนจะใช้ในการหมุนและพลิกไอคอน
ตัวอย่าง
รหัสต่อไปนี้:
<i class="fa fa-shield"></i>
<i class="fa fa-shield
fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield
fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>ผลการค้นหาใน:
ไอคอนซ้อนกัน
ไปยังกองหลายไอคอนใช้ fa-stack ระดับผู้ปกครองที่ fa-stack-1x ชั้นเรียนสำหรับไอคอนขนาดสม่ำเสมอและ fa-stack-2x หาไอคอนขนาดใหญ่
fa-inverse ชั้นสามารถใช้เป็นสีที่ไอคอนทางเลือก นอกจากนี้คุณยังสามารถเพิ่มการเรียนไอคอนขนาดใหญ่ให้กับผู้ปกครองเพื่อควบคุมการปรับขนาด
ตัวอย่าง
รหัสต่อไปนี้:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin
fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter
fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera
fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"
style="color:red;"></i>
</span>
fa-ban on fa-cameraผลการค้นหาใน:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
ไอคอนความกว้างคงที่
fa-fw ชั้นจะใช้ในการตั้งค่าไอคอนที่มีความกว้างคงที่ ชั้นนี้จะเป็นประโยชน์เมื่อความกว้างของไอคอนที่แตกต่างโยนออกจากการจัดตำแหน่ง ที่มีประโยชน์โดยเฉพาะอย่างยิ่งใน navlists เงินทุนและกลุ่มรายชื่อ
ตัวอย่าง
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> ลองตัวเอง» บูต
ตัวอักษรที่น่ากลัวยังใช้งานได้ดีกับทุกองค์ประกอบ Bootstrap