ไอคอนทำงานได้ดีสำหรับการแสดงตัวอย่างการดำเนินการที่ผู้ใช้สามารถทำได้ในแอปพลิเคชัน มีไลบรารีไอคอนหลายแห่งพร้อมใช้ ต่อไปนี้คือบางส่วน:
- Font Awesome – https://fontawesome.com/
- Flaticon – https://www.flaticon.com/
- ไอคอนดีไซน์ Material – https://material.io/resources/icons/
มีมากกว่าที่กล่าวไว้ข้างต้นมากมายอย่างแน่นอน แต่เป้าหมายของคู่มือนี้คือการแสดงให้คุณเห็นถึงวิธีใช้หนึ่งในไลบรารีด้านบนสำหรับโครงการของคุณและกำหนดเป้าหมายเพื่อควบคุมสไตล์ นอกจากนี้ เมื่อคุณเรียนรู้ขั้นตอนของห้องสมุดหนึ่งแล้ว ห้องสมุดอื่นๆ จะคล้ายกันมาก
ในบทความนี้ เราจะใช้ Font Awesome Icon Library ในตัวแก้ไขด้านล่าง ให้สังเกต <link> ในส่วนหัวของเอกสาร HTML นี่คือไฟล์ CSS ย่อเล็กสุดที่อ้างอิงถึงไลบรารีไอคอนของ Font Awesome “ย่อเล็กสุด” โดยทั่วไปหมายถึงความจริงที่ว่าช่องว่างทั้งหมดหายไป - ดังนั้นจึงไม่มีการจัดรูปแบบใด ๆ
ตราบใดที่คุณมีเครือข่ายการส่งเนื้อหา – CDN – ใน <head> คุณจะสามารถเข้าถึงห้องสมุดฟรีของ Font Awesome เกือบทั้งหมดได้ มีไลบรารี SVG ด้วยเช่นกัน แต่เราจะพูดถึงเรื่องนี้เมื่อเราพูดถึง JavaScript มากขึ้น
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons</title>
<style>
.icon-container {
font-size: 24px;
}
.fab {
font-size: 3rem;
color: #1DA1F1;
}
.fa-heart {
font-size: 4rem;
color: crimson;
}
</style>
</head>
<body>
<!-- Icons will go here -->
<div class="icon-container">
<i class="fab fa-twitter"></i>
<span class="fas fa-camera"></span>
<span class="fas fa-heart"></span>
</div>
</body>
</html>
ในเครื่องมือแก้ไขด้านบน คุณจะเห็นในเนื้อหาว่าเรามีองค์ประกอบอินไลน์สององค์ประกอบ <i> และ <span> องค์ประกอบ. ทั้งสองวิธีเป็นวิธีที่ถูกต้องในการเขียนไอคอนในมาร์กอัปของคุณ ฉันเคยเห็น <i> . เป็นการส่วนตัว ใช้มากที่สุด แต่เคยเห็น <span> ในโอกาสที่หายาก
คุณจะเห็นว่าเนื้อหาขององค์ประกอบนั้นว่างเปล่า แอตทริบิวต์ class คือวิธีที่เราดึงไอคอนที่เราต้องการจากไลบรารีของ Font Awesome โดยใช้ไฟล์ CSS ที่เราแทรกลงในส่วนหัวของไฟล์ HTML
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
หากคุณต้องการดูไฟล์ CSS เพื่อดูว่าคุณกำลังใช้งานอะไรอยู่ คุณสามารถทำได้อย่างแน่นอน มันจะให้กรอบข้อความแก่คุณ ดังนั้นมันอาจจะดูล้นหลามไปหน่อย เพิ่งรู้ว่ามีข้อมูลทั้งหมดที่คุณต้องการเพื่อแทรกไอคอนฟรีในโครงการของคุณ
ชื่อคลาสของไอคอนมีสองส่วน:ส่วนนำหน้าลักษณะและชื่อไอคอน ในตัวอย่างข้างต้น เราจะเห็นคำว่า "fab" และ "fas" “fa” ย่อมาจาก font Awesome, “b” ย่อมาจาก brand และ “s” ย่อมาจาก solid มีคำนำหน้าอื่น ๆ เช่นกัน แต่สิ่งเหล่านี้จำเป็นต้องมีบัญชี PRO
ชื่อไอคอนสามารถพบได้เมื่อคุณอ่านแกลเลอรีไอคอนบนเว็บไซต์ของ Font Awesome โดยปกติแล้วจะเป็นไปตามแบบแผนที่คุณเห็นด้านบน:“fa-
ไอคอนจะต้องได้รับการปฏิบัติเหมือนองค์ประกอบแบบอินไลน์เมื่อกำหนดสไตล์และควบคุมตำแหน่งบนหน้าด้วย CSS สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบไอคอนของ Font Awesome โปรดดูเอกสารซึ่งตรงไปตรงมาและจะช่วยให้คุณฝึกฝนการอ่านเอกสาร ตัวอย่างของการจัดสไตล์โดยใช้ CSS อยู่ในตัวแก้ไขด้านบน
อย่าลังเลที่จะใช้สภาพแวดล้อมแบบแซนด์บ็อกซ์ด้านบนเพื่อเล่นกับไอคอนและเริ่มจัดรูปแบบ!
