ตัวอย่างการเพิ่ม icon ลงใน tag html
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<span class="fas fa-user"></span>
<script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.min.js"></script>
</body>
</html>ผลลัพธ์สร้างและปรับขนาด icon
<span class="fas fa-user"></span>
<span class="fas fa-user fa-xs"></span>
<span class="fas fa-user fa-sm"></span>
<span class="fas fa-user fa-lg"></span>
<span class="fas fa-user fa-2x"></span>
<span class="fas fa-user fa-3x"></span>
<span class="fas fa-user fa-4x"></span>
<span class="fas fa-user fa-5x"></span>
<span class="fas fa-user fa-6x"></span>
<span class="fas fa-user fa-7x"></span>
<span class="fas fa-user fa-8x"></span>
<span class="fas fa-user fa-9x"></span>
<span class="fas fa-user fa-10x"></span>
<span class="fas fa-user" style="font-size:30px"></span>
<span class="fas fa-user" style="font-size:50px"></span>ผลลัพธ์สร้างและปรับขนาด icon
การเปลี่ยนสี icon
<span class="fas fa-user" style="color:red"></span>ผลลัพธ์การเปลี่ยนสี icon
การหมุน icon
<span class="fas fa-spinner fa-spin"></span>
<span class="fas fa-circle-notch fa-spin"></span>
<span class="fas fa-sync-alt fa-spin"></span>
<span class="fas fa-cog fa-spin"></span>ผลลัพธ์การหมุน icon
การหมุน icon เป็นจังหวะ
<span class="fas fa-spinner fa-pulse"></span>
<span class="fas fa-circle-notch fa-pulse"></span>
<span class="fas fa-sync-alt fa-pulse"></span>
<span class="fas fa-cog fa-pulse"></span>ผลลัพธ์การหมุน icon เป็นจังหวะ
การปรับองศา icon
<span class="fas fa-user"></span>
<span class="fas fa-user fa-rotate-45"></span>
<span class="fas fa-user fa-rotate-90"></span>
<span class="fas fa-user fa-rotate-180"></span>ผลลัพธ์การปรับองศา icon
การกลับด้าน icon
<span class="fas fa-umbrella-beach"></span>
<span class="fas fa-umbrella-beach fa-flip-horizontal"></span>
<span class="fas fa-umbrella-beach fa-flip-vertical"></span>ผลลัพธ์การกลับด้าน icon
การซ้อนทับ icon
<span class="fa-stack fa-lg">
<span class="fas fa-circle fa-stack-2x"></span>
<span class="fab fa-buffer fa-stack-1x fa-inverse"></span>
</span>
fa-buffer(inverse) on fa-circle (solid)<br>
<span class="fa-stack fa-lg">
<span class="far fa-circle fa-stack-2x"></span>
<span class="fab fa-buffer fa-stack-1x"></span>
</span>
fa-buffer on fa-circle (regular)<br>
<span class="fa-stack fa-lg">
<span class="fas fa-biking fa-stack-1x"></span>
<span class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></span>
</span>
fa-ban on fa-biking
ผลลัพธ์
fa-buffer(inverse) on fa-circle (solid)
fa-buffer on fa-circle (regular)
fa-ban on fa-biking
fa-buffer on fa-circle (regular)
fa-ban on fa-biking
สร้างลิ้ง
<a href="#"><span class="fas fa-user"></span> User</a>ผลลัพธ์สร้างลิ้ง
User
ตัวอย่างการสร้างลิ้งแบบปุ่ม
<a href="#" class="btn btn-primary"><span class="fas fa-user"></span> User</a>ผลลัพธ์ตัวอย่างการสร้างลิ้งแบบปุ่ม
User