การเปลี่ยนสีไอคอน
  06 มกราคม 2562       961

ในบางครั้งที่เราออกแบบหน้าแอพ เราอยากให้ไอคอนแต่ละอันมีสีแตกต่างกัน ซึ่งหากกำหนดโดยใช้ ion-icon จะทำให้ทุกไอคอนมีสีเดียวกันหมด
ปัญหานี้แก้ได้ง่ายๆ โดยการเพิ่ม css เข้าไปยังไฟล์ scss จากนั้นในหน้า html ค่อยเรียกใช้งาน css ที่สร้างขึ้น

ในตัวอย่างนี้จะเปลี่ยนสีของไอคอนจากสีดำ เป็นสีม่วง มีขั้นตอนการทำดังนี้

1. เปิดไฟล์นามสกุล .scss จากนั้นเขียนโค้ดเพื่อกำหนดรหัสสี


2. เปิดไฟล์นามสกุล .html จากนั้นในส่วนของไอคอนให้เรียกใช้งาน css ที่เราได้เขียนขึ้น


3. อย่าลืมบันทึกไฟล์ต่างๆ จากนั้นลองรันโปรแกรมเพื่อดูผลลัพธ์ จะเห็นว่าสีของไอคอนเปลี่ยนไปตามที่เราต้องการ


ดาวน์โหลด source code :

-