เนื้อหาตอนต่อไปนี้ เราจะมาแนะนำการใช้งาน
เพิ่มเติม เกี่ยวกับ icons ที่เราสามารถนำมาใช้งาน
ร่วมกับ bootstrap 4 ซึ่งจริงๆ ก็หมายถึงมาใช้งานร่วมกับ
เว็บไซต์หรือโปรเจ็คเว็บแอปพลิเคชั่นของเรา ก็ได้ ไม่จำเป้น
ต้องเป็น bootstrap แต่ในที่นี้จะขอจัดไว้ในเนื้อหาของ bootstrap
เราได้เคยทำความรู้จักและใช้งานไปแล้วสำหรับ fontawesome ซึ่งเป็น
icon ที่ได้รับความนิยมและใช้งานกัอย่างแพร่หลาย ทบทวนเนื้อหาเกี่ยวกับ
fontawesome ที่บทความด้านล่าง
การใช้งาน fontawesome ร่วมกับ bootstrap 4 อย่างง่าย http://niik.in/876
https://www.ninenik.com/content.php?arti_id=876 via @ninenik
สำหรับในตอนนี้ทาง bootstrap เองก็ทำการสร้าง icons ของตัวเองขึ้นมา แต่ ณ เวลาที่เขียนเนื้อหา
นี้ก็ยังเป็นเวอร์ชั่น v1.0.0-alpha4 และแน่นอน เราก็คงจะได้ใช้ในอีกไม่ช้า และอาจจะได้มาแนะนำเพิ่มเติม
ทีหลัง สำหรับ icons ที่ทาง bootstrap ได้ทดสอบและใช้งานมาก่อน ก็ได้แก่
ส่วน icons ที่ทาง bootstrap ยังไม่ได้ทดสอบใช้งาน แต่แนะนำเพิ่มเติม
ซึ่งเราจะแนะนำเฉพาะ รายการ ที่สามารถนำมาใช้งานร่วมกับแท็ก html หรือ boostrap ได้ง่ายๆ
การได้รู้จักกับตัวเลือกเพิ่มเติมของ icons ทำให้เราสามารถเลือกที่จะใช้งาน icons ได้มากขึ้น เพราะบางกรณี
fontawesome ก็ไม่มี icons ที่เราต้องการ หรือไม่ก็เป็นตัวที่อาจจะต้องเป็นเวอร์ชั่น pro หรือเสืยเงิน การมีตัวเลือก
เพิ่มเติม เป็นสิ่งที่ดีและเราอาจจะเจอ icons ที่ถูกใจสำหรับโปรเจ็คของเราก็ได้
การใช้งาน Feather Icons
สามารถเลือก icons ที่ต้องการที่เว็บไซต์ Feather
วิธีเรียกใช้งาน ในที่นี้แนะนำเป็น cdn หรือเราจะโหลดมาไว้ที่ server เราแล้วเรียกใช้งานก็ได้
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.27.0/feather.min.js"></script>
จะกำหนดในส่วนของ head หรือ ก่อนปิดแท็ก body ก็ได้ โดยเมื่อเราเรียกใช้งาน ก็จะได้ตัวแปร feather ที่เป็นแบบ
global สามารถใช้งานใน script ภายในเว็บเพจได้
การกำหนด icons ใช้แท็ก <i> คล้ายๆ กับการใช้งาน awesome แต่กำหนด เป็นรูปแบบดังนี้
<i data-feather="heart"></i> <i data-feather="user"></i> <i data-feather="camera"></i>
คือใช้ data-feather เป็น attribute แล้วกำหนดค่าเป็นชื่อ icon ที่เราต้องการ และเพื่อให้ icons ทั้ง 3 ในตัวอย่างข้างต้น แสดง
โดยทำการแปลงเป็นรูป icon แบบ vector โดยใช้ svg แท็ก ให้ทำการเรียกใช้คำสัง javascirpt ดังนี้
<script> feather.replace() </script>
โดยกำหนดไว้ก่อนปิดแท็ก body หรือจะกำหนดเมื่อ dom พร้อมใน javascript หรือ jquery ก็ได้ เช่น
<script>
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
feather.replace();
});
</script>
หรือ
<script type="text/javascript">
$(function(){
feather.replace();
});
</script>
ซึ่งถ้าเป็นไปได้ก็แนะนำเป็นสองวิธีหลัง เพราะถึงแม้ว่าเราจะกำหนดไว้ก่อนแท็กปิด body ตามการใช้งานวิธีแรก แต่ก็อาจจะ
มีบางกรณีที่เราทำการสร้าง element จาก javascript หรือดึงข้อมูลจาก ajax โค้ดเบื้องต้นของเราอย่างง่าย ก็จะได้การเรียก
ใช้งานเป็นดังนี้
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" >
</head>
<body>
<div id="default-theme" class="container py-5">
<i data-feather="heart"></i>
<i data-feather="user"></i>
<i data-feather="camera"></i>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.27.0/feather.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
feather.replace();
});
</script>
</body>
</html>
ผลลัพธ์
การกำหนด attribute ใดๆ เข้าไปในแท็ก i ค่าก็จะถูกส่งต่อไปยังแท็ก svg เมื่อมีการแปลงรูป icons ด้วยการเรียกใช้งาน
คำสั่ง feather.replace() ดังนั้น ถ้าเราใช้งานร่วมกับ bootstrap theme ก็สามารถกำหนด class เข้าไปได้เช่น
<i data-feather="heart" class="text-red"></i> <i data-feather="user" class="text-green"></i> <i data-feather="camera" class="text-blue"></i>
ผลลัพธ์
เราสามารถใช้ attribute ของ svg มากำหนดให้กับแท็ก i ตามค่า property ที่ต้องการได้ ซึ่งได้แก่ค่าดังนี้
width="24" // ความกว้าง หน่วย px ควรเป็นค่าที่หารด้วย 4 ลงตัว height="24" // ความสูง หน่วย px ควรเป็นค่าที่หารด้วย 4 ลงตัว fill="none" // สีของ icon แบบเติม stroke="currentColor" // สีของเส้น ค่าสี หรือชื่อสี stroke-width="2" // ความหน้าของเส้น หน่วย px stroke-linecap="round" // รูปแบบของส่วนหัว-ท้ายของเส้น stroke-linejoin="round" // รูปแบบของมุมเส้นที่ต่อเชื่อมกัน
สมมติเช่น เราต้องการให้ icons หัวใจมีขนาดที่ 40 px และมีสีเป็นสีแดง
<i data-feather="heart" width="40" height="40" fill="red" stroke="yellow"></i>
ผลลัพธ์
เราสามารถ inspect ตัวแท็ก svg ที่มีการแปลง และส่งค่า attribute ต่างๆ เข้ามา เช่นดังนี้
ถ้าเราลองสำรวจเว็บไซต์ของ feather จะพบว่า feather เป็น icon รูปแบบง่ายๆ และมีจำนวนให้เลือกไม่มากนัก
ประมาณเกือบ 300 icons แต่สำหรับโปรเจ็คเล็กๆ ก็ถือว่าเหมาะสม หรือใครชอบรูปแบบของ icons ลักษณะนี้ ก็สามารถ
นำปใช้งานได้ง่ายๆ
การใช้งาน Google Material Icons
สำหรับ Material icons ของ google มีให้เลือกใช้ทั้งแบบ PNG และ SVG ไฟล์ สามารถเข้าไปดาวน์โหลดไฟล์ทั้งหมดได้ที่
แต่ในที่นี้เราจะแนะนำในรูปแบบการใช้งาน icons font เพราะเรียกใช้งานง่าย โดยทำการเพิ่มส่วนของการเรียกใช้งานนี้
ไปในส่วนของ head ของหน้าเพจที่เราจะใช้งาน
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
จากนั้นเลือก icons ที่ต้องการผ่านเว็บไซต์ Material Icons
โดยกำหนดการใช้งานในแท็ก HTML ดังนี้
<i class="material-icons">g_translate</i> <i class="material-icons">settings_input_antenna</i> <i class="material-icons">schedule</i> <i class="material-icons">search</i> <i class="material-icons">settings</i>
ผลลัพธ์
กำหนดรูปแบบ theme ที่ต้องการ โดย material icons จะรองรับรูปแบบ theme ได้แก่ filled, outlined, rounded, two-tone
และ sharp โดยค่าเริ่มต้นจะเป็น แบบ filled หากต้องการใช้งานรูปแบบอื่น ให้เราต่อท้ายชื่อ class ที่เรียกใช้ material-icons เป้น
ตามรูปแบบด้านล่างด้งนี้
material-icons-outlined material-icons-round material-icons-two-tone material-icons-sharp
ซึ่งก่อนที่เราจะใช้งาน ต้องเปลี่ยนการเรียกใช้ icon font ใหม่เพิ่มเติมเป็นดังนี้
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" >
เราสามารถเลือกได้ว่า จะใช้ theme แบบไหนในโปรเจ็คหรือเว็บของเรา และสามารถกำหนดเฉพาะส่วนที่ใช้งานได้ เช่น ถ้าเราจะ
ใช้งานเฉพาะ filled และ outlined ก็กำหนดแบบนี้แทน
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" >
ตัวอย่างการใช้งาน theme
<i class="material-icons-outlined">g_translate</i> <i class="material-icons-sharp">settings_input_antenna</i> <i class="material-icons-two-tone">schedule</i> <i class="material-icons">search</i> <i class="material-icons-round">settings</i>
ผลลัพธ์
การกำหนดขนาดของ icons โดยค่าเริ่มต้นจะเป็นที่ 24px เราสามารถปรับขนาดเพิ่มเติมด้วย css ได้ตามต้องการ
โดยแนะนำรูปแบบการกำหนดขนาดที่เหมาะสมเช่น 18px 24px 36px 48px เป็นต้น ตัวอย่างเช่น เรากำหนด css class
และเรียกใช้ดังนี้
<style type="text/css">
.mi-18{font-size: 18px;}
.mi-24{font-size: 24px;}
.mi-36{font-size: 36px;}
.mi-48{font-size: 48px;}
</style>
<i class="material-icons-outlined mi-24">g_translate</i>
<i class="material-icons mi-18">settings_input_antenna</i>
<i class="material-icons mi-36">schedule</i>
<i class="material-icons">search</i>
<i class="material-icons mi-48">settings</i>
ผลลัพธ์
เราสามารถกำหนดค่าอื่นๆ ได้ตามความต้องการและเหมาะสม ซึ่งเป็นไปได้ควรเป็นค่า หรือช่วงค่าตามรุปแบบที่แนะนำ เช่น
12px 18px 24px 30px 36px 42px 48px... เป็นต้น
การใช้งานกับ bootstrap ก็สามารถกำหนด class เพิ่มเติมเข้าไปปกติ เช่นกำหนดสี
<i class="material-icons-outlined text-blue mi-24">g_translate</i> <i class="material-icons mi-18">settings_input_antenna</i> <i class="material-icons text-pink mi-36">schedule</i> <i class="material-icons">search</i> <i class="material-icons text-green mi-48">settings</i>
ผลลัพธ์
การใช้งาน Ionicon Icons
ionicon icons เป็น icons ของทีมงาน ionic framework มีมากกว่า 1,200 icons ให้เลือกใช้งาน
การเรียกใช้ ให้กำหนดการเรียก javascript ก่อนปิดแท็ก body ดังนี้
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
จากนั้นเลือก icons ที่ต้องการผ่านเว็บไซต์ Ionicon Icons
โดยกำหนดการใช้งานในแท็ก HTML ดังนี้
<ion-icon name="heart"></ion-icon> <ion-icon name="headset"></ion-icon> <ion-icon name="desktop"></ion-icon> <ion-icon name="notifications"></ion-icon>
ผลลัพธ์
สังเกตว่า ionicon มีการใช้งาน custom elements
ในแท็กที่ชื่อว่า <ion-icon> เป็นคุณสมบัติหนึ่งของ Web Components ที่เราสามารถสร้าง และกำหนด element ที่ต้องการมาใช้งานได้
สำหรับรูปแบบของ ionicon ค่าเริ่มต้นจะเป็นการใช้งานใน theme รูปแบบ filled และขนาดจะเป็น small โดย theme ของ ionion ประกอบด้วย
filled, outline และ sharp โดยสามารถเรียกใช้ได้ดังนี้
<ion-icon name="heart-outline"></ion-icon> <ion-icon name="headset"></ion-icon> <ion-icon name="desktop-outline"></ion-icon> <ion-icon name="notifications-sharp"></ion-icon>
ผลลัพธ์
สำหรับการกำหนดขนาด หากใช้เป็นค่าที่ ionicon กำหนดมาให้ จะมีสองค่าคือ small และ large โดยกำหนดผ่าน attrbute ที่ชื่อว่า size
โดย small จะมีขนาดที่ 18px และเป็นค่าเริ่มต้นไม่กำหนดก็ได้ถ้าจะใช้งาน ส่วน large จะมีขนาดที่ 32px ดูตัวอย่างการกำหนดใช้งานดังนี้
<ion-icon name="heart-outline" size="small"></ion-icon> <ion-icon name="headset" size="large"></ion-icon> <ion-icon name="desktop-outline" size="large"></ion-icon> <ion-icon name="notifications-sharp" size="small"></ion-icon>
ผลลัพธ์
ถึงแม้ <ion-icon> จะเป็น custom element แต่ก็ยังสามารถใช้งานเหมือนแท็กปกติทั่วไป และรองรับการกำหนด css class เช่น เราอาจจะกำหนด
ขนาด ด้วย css class แล้วเรียกใช้งานก็ได้ โดยทาง ionicon แนะนำให้เพิ่มครั้งละ 8px เช่นใช้เป็นค่า 8px 16px 24px 32px 40px.. เป็นต้น
<style type="text/css">
.io-8{font-size: 8px;}
.io-16{font-size: 16px;}
.io-24{font-size: 24px;}
.io-32{font-size: 32px;}
.io-40{font-size: 40px;}
</style>
<ion-icon name="heart-outline" class="text-pink io-24" ></ion-icon>
<ion-icon name="headset" class="io-40"></ion-icon>
<ion-icon name="desktop-outline" class="text-green io-32"></ion-icon>
<ion-icon name="notifications-sharp" ></ion-icon>
ผลลัพธ์
หลักการทำงานของ ionicon จะคล้ายกับ feather icons คือแปลง แท็กที่กำหนดให้เป็นภาพ svg แต่ใน ionicon จะเป็นการเพิ่ม svg เข้ามาในแท็กเดิม
โดยแทรกเข้ามาในแท็ก <ion-ion> อีกที ถ้าเรา inspect ดูจะได้ดังรูปด้านล่าง
สำหรับ icons ที่เหลือ ที่ไม่ได้แนะนำวิธีใช้ข้างต้น ได้แก่
เหล่านี้ข้างต้น ส่วนใหญ่ จะสนับสนุนไฟล์ svg ที่สามารถเข้าไปทำการดาวน์โหดล และเรียกใช้งานผ่านแท็ก <img> ได้เลย เช่น Octicons, Ikons, IKons
<img src="heart.svg" />
แถมยังมีนามสกุลไฟล์อื่นๆ ให้เรานำมาปรับแต่งแก้ไขเพิ่มเติม และใช้งานได้ เช่นไฟล์ PSD PNG EPS AI เป็นต้น
หรือบาง icons ก็มีรุปแบบเป็น svg xml แท็กที่เราสามารถเอามาฝังหรือใช้งานในเว็บของเรา เช่น Bytesize, Icons8
<svg id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"
fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
</svg>
ในส่วนของ Icons8 มีจุดที่น่าสนใจตรงที่มี icons จำนวนมากให้เลือกใช้ทั้งแบบฟรี และแบบเสียเงิน ในรูปแบบที่หลากหลาย แต่วิธีการเรียรกใช้งาน
ก็ขึ้นกับวิธีนำไปใช้ด้วย ซึ่งเกี่ยวกับ License หรือลิขสิทธิ์การใช้งาน อย่างกรณีเราใช้เป็นการเรียกไฟล์จาก cdn ก็ควรจะมีลิ้งค์ระบุสักที่ในเว็บของเรา
ตามเงื่อนไขและรูปแบบที่เขาระบุไว้
หรือไม่ถ้าไม่ต้องการระบุลิ้งค์ไปยัง cdn ที่เราใช้งาน ก็ใช้เป็น svg xml ก็สะดวก แต่อย่าลืมว่า svg xml ก็เหมือนกัน html แท็กทั่วไป ยิ่งใช้งานมาก
จำนวน element หรือ DOM Element ในหน้าเพจนั้นก็จะเยอะตามไปด้วย อาจจะทำให้การแสดงผลช้าได้ หากนำมาใช้จำนวนมากเกินไป ดังนั้นก็เลือก
ใช้ตามความเหมาะสม
ตัวอย่างการใช้งาน svg xml ของ Icons8 ดูที่ Demo ด้านล่าง
หวังว่าแนวทางการใช้งาน icons เพิ่มเติมสำหรับ bootstrap นี้จะเป็นประโยชน์ ในการนำไปประยุกต์ใช้งานต่อไป
เนื้อหาที่เกี่ยวข้อง