Icon

All Icon

ตัวอย่างการเพิ่ม 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


สร้างลิ้ง
<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