EDUCATION!

"เช้าใดที่ยังไม่ได้ทำทาน" เป็นส่วนหนึ่งของคติธรรมคำสอนที่ว่า "เช้าใดยังไม่ได้ทำทาน เช้านั้นอย่าเพิ่งกินข้าว วันใดยังไม่ได้ตั้งใจรักษาศีล วันนั้นอย่าเพิ่งออกจากบ้าน คืนใดยังไม่ได้นั่งสมาธิเจริญภาวนา คืนนั้นอย่าเพิ่งเข้านอน"
หน้าแรก
ธรรมะ
ไอคอน

คู่มือการใช้งานเบื้องต้น icon สวยๆ : คลังไอคอนธรรมะและทางโลก

รวมคลังไอคอนธรรมะและทางโลก ใช้ตกแต่งบทความ Blogger


เรียนรู้เกี่ยวกับเว็บได้นี่ web.dev

วิธีใช้งานคลังไอคอนใน Blogger

1. ทำไมต้องใส่โค้ดใน <head> ก่อน

  • Blogger เองไม่มีไอคอนติดมาให้

  • เราต้องโหลดไลบรารีไอคอน เช่น Font Awesome, Material Icons, และ Boxicons

  • ถ้าไม่ใส่โค้ดนี้ ไอคอนจะไม่แสดงผล จะเห็นเป็นสี่เหลี่ยมว่าง ๆ

2. โค้ดที่ต้องใส่ใน <head>

ให้เข้าไปที่ ธีม (Theme) → แก้ไข HTML (Edit HTML) → ค้นหาส่วน <head> แล้ววางโค้ดนี้ลงไป:

html
<head>
  <!-- โหลดไอคอนที่จำเป็น -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"/>
</head>

3. โค้ดตัวอย่างสำหรับโพสต์ Blogger

เมื่อเตรียม <head> เสร็จแล้ว คุณสามารถนำโค้ดนี้ไปวางในเนื้อหาโพสต์ เพื่อแสดงไอคอนพร้อมปุ่ม Copy:

html
<div class="icon-section">
  <h2><i class="fa-solid fa-dharmachakra"></i> หมวดหมู่ธรรมะน่ารู้</h2>
  
  <div class="icon-item">
    <i class="fa-solid fa-book-open"></i> พระไตรปิฎก
    <code id="icon1">&lt;i class="fa-solid fa-book-open"&gt;&lt;/i&gt;</code>
    <button class="copy-btn" onclick="copyPrompt('icon1','status1')"><i class="fa-solid fa-copy"></i> Copy</button>
    <span id="status1" class="copy-status">คัดลอกสำเร็จ!</span>
  </div>
</div>

<style>
.icon-section { margin:20px 0; padding:10px; border:1px solid #ddd; border-radius:8px; background:#f9f9f9; }
.icon-section h2 { margin-top:0; color:#8B0000; }
.icon-item { display:flex; align-items:center; gap:10px; margin:8px 0; }
.icon-item code { background:#eee; padding:2px 6px; border-radius:4px; font-size:0.8rem; }
.copy-btn {
  margin-left:auto; padding:4px 8px; font-size:0.8rem;
  background:#007bff; color:#fff; border:none; border-radius:4px;
  cursor:pointer; display:flex; align-items:center;
}
.copy-btn i { margin-right:4px; }
.copy-btn:hover { background:#0056b3; }
.copy-status { margin-left:10px; color:green; display:none; }
</style>

<script>
function copyPrompt(elementId, statusId) {
  var copyText = document.getElementById(elementId);
  var textToCopy = copyText.textContent || copyText.value;
  navigator.clipboard.writeText(textToCopy);

  var status = document.getElementById(statusId);
  status.style.display = "inline";
  setTimeout(function() { status.style.display = "none"; }, 2000);
}
</script>

4. ผลลัพธ์ที่ได้

  • หน้า Blogger จะแสดงไอคอนจริง เช่น 📖 พระไตรปิฎก

  • มีโค้ดตัวอย่างใน <code> ให้ผู้ใช้เห็น

  • มีปุ่ม Copy ที่กดแล้วคัดลอกโค้ดไปใช้งานได้ทันที พร้อมข้อความ “คัดลอกสำเร็จ!”

✅ สรุป

  • นักเรียนที่ทำตามต้องอ่านบทความนี้ให้เข้าใจ เพราะมันอธิบายตั้งแต่การเตรียมเทมเพลต <head> ไปจนถึงการใช้งานจริงในโพสต์

  • ถ้าอ่านไม่เข้าใจแล้วคัดลอกไปวาง อาจทำให้โค้ดไม่ทำงานหรือแสดงผลผิดพลาด

  • การอ่านและเข้าใจคือหัวใจสำคัญของการเรียนรู้ ไม่ใช่แค่การ Copy & Paste

คลังไอคอนธรรมะและทางโลก

คลังไอคอนธรรมะและทางโลก

หมวดหมู่ธรรมะน่ารู้

พระไตรปิฎก <i class="fa-solid fa-book-open"></i> คัดลอกสำเร็จ!
บทสวดมนต์ <i class="fa-solid fa-hands-praying"></i> คัดลอกสำเร็จ!
วันพระ <i class="fa-solid fa-moon"></i> คัดลอกสำเร็จ!

public หมวดทางโลกและการใช้ชีวิต

work การงาน <span class="material-icons">work</span> คัดลอกสำเร็จ!
trending_up พัฒนาตนเอง <span class="material-icons">trending_up</span> คัดลอกสำเร็จ!

หมวดโซเชียลและการแจ้งเตือน

เฟซบุ๊ก <i class='bx bxl-facebook-circle'></i> คัดลอกสำเร็จ!
ยูทูบ <i class='bx bxl-youtube'></i> คัดลอกสำเร็จ!