របៀបប្រើប្រាស់ Icon Font Awesome នៅលើប្លក់

ស្វាគមន៍ជាថ្មីប្រិយ៍មិត្តទាំងអស់គ្នា ជួបគ្នាទៀតហើយបាទ! មិនខុសពីពេលមុនឡើយថ្ងៃនេះខ្ញុំសូមបង្ហាញអ្នកទាំងអស់គ្នាពីរបៀបប្រើប្រាស់អាយខន់ (Icon) ដែលមានឈ្មោះថា "Font Awesome" ដែលគេនិយមយកទៅប្រើប្រាស់នៅលើគេហទំព័រឬក៏ប្លក់ផ្សេងៗផងដែរ។

Font Awesome Icon គឺជាគេហទំព័រមួយដែលអនុញ្ញាតឲ្យអ្នកទាំងអស់គ្នាយកអាយខន់ផ្សេងៗរាប់ពាន់រាប់ម៉ឺនអាយខន់យកមកដាក់ដើម្បីលម្អសោភណ្ឌភាពប្លក់ឬគេហទំព័ររបស់យើងឲ្យមានភាពស្រស់ស្អាតនិងទាក់ទាញអ្នកចូលទស្សនា។ អ្នកអាចប្រើប្រាស់ Font Awesome Icon បានដោយត្រូវចំណាយប្រាក់ដើម្បីទទួលបាននូវអាយខន់ឡូយៗទំនើបនិងមានលក្ខណៈពិសេសច្រើនជាង ការប្រើប្រាស់មិនបង់លុយ ហើយក្នុងអត្ថបទមួយនេះខ្ញុំបង្ហាញអ្នកទាំងអស់គ្នាក្នុងការប្រើប្រាស់ Font Awesome Icon ដោយមិនចាំបាច់ចំណាយប្រាក់នោះឡើយ។

១-សូមចូលទៅកាន់គណនីប្លក់របស់អ្នក
២-ចូលទៅកាន់ Theme បន្ទាប់មក Edit HTML
៣-ចម្លងកូដខាងក្រោមដាក់ពីខាងក្រោម <head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />

៤-ចូលទៅកាន់គេហទំព័រ https://fontawesome.com/icons?d=gallery&m=free
៥-ជ្រើសរើសឬស្វែងរកអាយខន់ណាមួយដែលអ្នកពេញចិត្ត រួចចុចទៅលើអាយខន់នោះ

៦-ចម្លង HTML Icon Code ទៅដាក់ក្នុងប្លក់របស់អ្នកត្រង់កន្លែងណាមួយដែលអ្នកចង់ឲ្យអាយខន់នោះបង្ហាញ
ឧទាហរណ៍៖ <i class="fas fa-motorcycle"></i>

+ ដាក់អាយខន់ពីមុខអក្សរ៖

<i class="fas fa-motorcycle"></i> នេះគឺជាម៉ូតូរបស់ខ្ញុំ

* លទ្ធផលដែលទទួលបាន៖ នេះគឺជាម៉ូតូរបស់ខ្ញុំ ។

+ ដាក់ពណ៌ឲ្យអាយខន់៖ បន្ថែម Style Attribute

<i class="fas fa-motorcycle" style="color:red"></i> របស់ខ្ញុំពណ៌ក្រហម

* លទ្ធផលដែលទទួលបាន៖ របស់ខ្ញុំពណ៌ក្រហម ។

+ បង្វិលអាយខន់៖ បន្ថែម .class fa-rotate-[ ចំនួនដឺក្រេ ]

<i class="fas fa-motorcycle"></i> // ធម្មតា
<i class="fas fa-motorcycle fa-rotate-90"></i> // ៩០ ដឺក្រេ
<i class="fas fa-motorcycle fa-rotate-180"></i> // ១៨០ ដឺក្រេ
<i class="fas fa-motorcycle fa-rotate-270"></i> // ២៧០ ដឺក្រេ

* លទ្ធផលដែលទទួលបាន៖ ។

+ ចលនាអាយខន់៖ បន្ថែម .class fa-spin ឬ fa-pulse

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

* លទ្ធផលដែលទទួលបាន៖ ។

សូមអរគុណ! ជួបគ្នាពេលក្រោយទៀត៕