แทรก icon ในบล็อก

เล่าเรื่องโดย iEasyCom_Admin

Icon Libraries

With W3.CSS you can use the icon library you like, such as:

  • Font Awesome Icons
  • Google Material Design Icons
  • Bootstrap Icons

Using an Icon Library

To insert an icon:

  1. Include the icon library from a CDN (Content Delivery Network) in the <head> section.
  2. Add the name of the icon class to any inline HTML element.

Tip: The <i> and <span> elements are widely used to add icons.

To control the size of the icon, change the font-size property of the icon, or use one of the w3-size classes:

  • w3-tiny
  • w3-small
  • w3-large
  • w3-xxlarge
  • w3-xxxlarge
  • w3-jumbo


  อ่านเพิ่มเติมได้ที่ https://www.w3schools.com/w3css/w3css_icons.asp


1. icon  จาก Font Awesome

ที่เว็บไซต์ Font Awesome บุคคลที่เป็นสมาชิกแบบฟรีจะมีไอคอนให้ใช้ได้ฟรี 1588 ตัว และสำหรับสมาชิกแบบ PRO จะมีไอคอนให้ใช้ได้ 7842 ตัว 

ในบทความนี้เราจะแนะนำวิธีการใช้รุ่นฟรี  

ขั้นแรก ต้องลงชื่อสมัครใช้บัญชีที่ Font Awesome และรับรหัส 10 ตัว (เรียกว่า KIT CODE) ใส่โค้ด html ที่ระบุรหัสที่ได้รับลงในส่วน Header ของหน้าเว็บ จากนั้นสามารถเลือกไอค่อนจากหน้าเว็บของ Font Awesome เมื่อได้ไอค่อนที่ต้องการให้คัดลอกโค้ดของแต่ละไอค่อนมาวางในส่วน Body ของหน้าเว็บ 

กรณีไม่ใช้วิธีใส่โค้ดที่ Header คุณสามารถเลือกดาวน์โหลดไลบรารี Font Awesome เพื่อเป็นแหล่งในการดึงข้อมูลไอค่อนก็ได้ แต่ต้องอ้างแหล่งไฟล์ที่มาของไอค่อนแทน

กรณีใช้รหัส kit code ใส่โค้ด html ลงในส่วน Header ของเว็บ ตามตัวอย่างดังนี้

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>

<script src="https://kit.fontawesome.com/your kit code.js" crossorigin="anonymous"></script>

<!--Get your own code at fontawesome.com-->

</head>
<body>
<h1>fas fa-clock</h1>
<i class="fas fa-clock"></i>
<h1>fas fa-shuttle-van</h1>
<i class='fas fa-shuttle-van'></i>
<i class='fas fa-shuttle-van' style='font-size:24px'></i>
<i class='fas fa-shuttle-van' style='font-size:36px'></i>
<i class='fas fa-shuttle-van' style='font-size:48px;color:red'></i>
<br>
<p>Used on a button:</p>
<button style='font-size:24px'>Button <i class='fas fa-shuttle-van'></i></button>
<p>Unicode:</p>
<i style='font-size:24px' class='fas'>&#xf5b6;</i>
</body>
</html>

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











2. ใช้กูเกิลไอค่อน ไปที่ https://fonts.google.com/icons? ค้นหาไอค่อนที่ต้องการ

สามารถเลือกใช้เป็นโค้ด หรือเป็นไฟล์ชนิดอื่นก็ได้


กรณีเป็นโค้ด ต้องระบุ link code ในส่วน header ก่อน แล้วจึงวางโค้ดของไอค่อนในส่วนเนื้อหา

ตัวอย่าง:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>

</body>
</html>

ผลที่ได้:


<p>&nbsp;</p>


<html>

<head>

<title>Google Icons</title>

<meta content="width=device-width, initial-scale=1" name="viewport"></meta>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>

</head>

<body>


<p>Some Google icons:</p>

<i class="material-icons">cloud</i>

<i class="material-icons">favorite</i>

<i class="material-icons">attachment</i>

<i class="material-icons">computer</i>

<i class="material-icons">traffic</i>

<br /><br />


<p>Styled Google icons (size and color):</p>

<i class="material-icons" style="font-size: 24px;">cloud</i>

<i class="material-icons" style="font-size: 36px;">cloud</i>

<i class="material-icons" style="color: red; font-size: 48px;">cloud</i>

<i class="material-icons" style="color: lightblue; font-size: 60px;">cloud</i>


</body>

</html>