แจกฟรี Icon Font เซ็ตธนาคารไทยสวย ๆ + วิธีใช้ทีละขั้นตอน

designil

วันก่อนคุณ Julien ซึ่งเคยเจอกันในงาน WordPress Meetup หลาย ๆ ครั้งก็ส่งลิงค์หนึ่งมาให้ดูครับ เค้าบอกว่าเพิ่งทำเสร็จ และอยากให้ช่วยเผยแพร่ให้กลุ่มคนทำเว็บไซต์ในไทยให้หน่อย พอผมเข้าไปดูก็รู้สึกว่ามีประโยชน์มากโดยเฉพาะอย่างยิ่งในยุคที่เว็บไซต์ E-Commerce กำลังบูม เลยกลายมาเป็นบทความนี้ครับ


Icon Font คืออะไร

สำหรับรายละเอียดว่า Icon Font คืออะไร นั้นสามารถอ่านได้ที่บทความก่อนหน้านี้ของ Designil เลยครับ โดยสรุปแบบรวบรัดก็คือ:

  • Icon แบบเป็นรูปจะเบลอใน หน้าจอ Retina ทำให้จะต้องใช้ไฟล์ใหญ่มากเพื่อให้คมชัด
  • ถ้าอยากทำให้โหลดเร็ว ลด Request ต้องทำ CSS Spritesheet แต่ก็จะมีปัญหาว่าทำให้รองรับหน้าจอ Retina ได้ยากอีก
  • เพราะฉะนั้น Icon Font เป็นวิธีแก้ปัญหาข้างต้นที่ได้ผลมาก เพราะใช้แค่ 1 Request และไอคอนคมชัดทุกหน้าจอ
  • สรุปง่าย ๆ ว่าทำให้เว็บ E-Commerce ของคุณโหลดเร็วขึ้น แถมกราฟฟิกสวยงาม

พอรู้จัก Icon Font กันแล้วนะครับ มาลองดู Icon Font เซ็ตธนาคารไทยกันเลย


Icon Font ธนาคารไทย ใช้งานฟรี

Thai Banks Icon Fonts Kasikorn
ไอคอนฟ้อนต์ธนาคารไทย โดย Omise และคุณ Julien Vernet

ไอคอนเซ็ตนี้มีโลโก้ของ 31 ธนาคาร ออกแบบโดย Omise และแปลงเป็น Icon Font โดยคุณ Julien Vernet โดยไอคอนที่มีในเซ็ตนี้ก็มีครบ เหมาะมากกับการเอาไปใช้กับเว็บไซต์ E-Commerce ครับ ตัวอย่างไอคอนก็เช่น:

  • ธนาคารไทย เช่น ธนาคารกรุงเทพ, ธนาคารกสิกรไทย, ธนาคารกรุงศรีอยุธยา ฯลฯ
  • ธนาคารต่างประเทศที่มีสาขาในไทย เช่น ธนาคาร Standard Chartered, ธนาคาร CIMB Thai ฯลฯ

เพิ่มเติมเรื่องลิขสิทธิ์: ลิขสิทธิ์ของโลโก้เหล่านี้เป็นของแต่ละธนาคารที่เป็นเจ้าของนะครับ

ต่อไปมาดูวิธีการนำไปใช้ในเว็บไซต์ของเรากันครับ


วิธีการใช้ Icon Font ธนาคารไทยในเว็บไซต์

โหลดไฟล์โลโก้ธนาคาร ฟรี
โหลดไฟล์โลโก้ธนาคาร ฟรี

ก่อนอื่นเลยเข้าไปที่เว็บไซต์ Github banks logo แล้วกดปุ่ม Download สีเขียวได้เลยครับ ที่เขียนว่า Clone or download > Download ZIP

*ต้อง Login ก่อนนะครับ

วิธีดาวน์โหลด icon เซ็ตธนาคารไทย
วิธีดาวน์โหลด icon เซ็ตธนาคารไทย

ดาวน์โหลดมาแล้วจะได้ไฟล์มาเป็น SVG นะครับ ปัจจุบันไม่มีแจกเป็นฟ้อนต์แล้วครับ

ชื่อไอค่อนธนาคารที่ได้จากไฟล์ดาวน์โหลด
ชื่อไอค่อนธนาคารที่ได้จากไฟล์ดาวน์โหลด

*หมายเหตุบทความด้านล่างนี้ เขาไม่ได้แจกเป็น Fonts แล้วครับ
แจกเป็นไอค่อนแทน :D

ใช้งาน .svg ด้านบนแทนได้เลยครับ .svg สามารถนำไปใส่ในเว็บไซต์ นำไปใช้งานได้ฟรี ออกแบบเว็บไซต์ได้

ไฟล์ .svg สามารถเปิดผ่านโปรแกรม Photoshop หรือ Illustrator ได้ครับ

อ่านบทความเวอร์ชั่นอัพเดทที่นี่เลยนะครับ
โลโก้ธนาคาร แจกฟรีมีครบ ไฟล์ vector สวย ๆ


ขั้นตอนที่ 1) ใส่ไฟล์ Icon Font ลงในโปรเจคของเรา

วิธีการใช้ Font Icon ธนาคารไทยในเว็บไซต์
แกะ ZIP ออกมาจะได้แบบนี้ครับ

พอแกะ ZIP ออกมาจะเจอ 2 โฟลเดอร์ คือ /css กับ /fonts ครับ

ให้ก็อปปี้โฟลเดอร์ /fonts ไปใส่ในโฟลเดอร์เว็บไซต์ของเราครับ

ส่วนไฟล์ CSS เค้าจะมีมาให้ 3 ไฟล์ครับ เลือกก็อปปี้ไฟล์ thbanklogos.min.css ไปใช้ได้เลย

ไอคอนฟ้อนต์ธนาคารไทย Download ฟรี
3 ไฟล์นี้จะอยู่ในโฟลเดอร์ /css ครับ เลือกใช้ไฟล์สุดท้ายพอ

หรืออีกวิธี คือ ก็อปปี้โค้ดในไฟล์ thbanklogos-colors.css กับ thbankslogo.css ไปใส่ในไฟล์ CSS ของเราก็ได้ครับ

เรื่องนึงที่ควรระวังก็คือ เรื่องของ Path ไฟล์จาก CSS ไปโฟลเดอร์ /fonts ครับ (เฉพาะคนที่ไม่ได้วางไฟล์ไว้ใน /css กับ /fonts แบบที่เค้าจัดมาให้) เพราะตอนแรกโค้ดจะมาแบบด้านล่างนี้ครับ

@font-face {
  font-family: "thbanks";
  src: url('../fonts/thbanks.eot');
  src: url('../fonts/thbanks.eot?#iefix') format('eot'),
    url('../fonts/thbanks.woff') format('woff'),
    url('../fonts/thbanks.ttf') format('truetype'),
    url('../fonts/thbanks.svg#thbanks') format('svg');
  font-weight: normal;
  font-style: normal;
}

(โค้ดส่วนนี้จะอยู่ในไฟล์ thbanklogos.min.css หรือ thbankslogo.css อยู่ที่เราเลือกเอาไฟล์ไหนมาใช้นะครับ)

สังเกตจากโค้ดด้านบนมีเขียนว่า ../fonts/ นั่นหมายถึงว่า มันจะหาไฟล์ฟ้อนต์โดยออกไปนอกโฟลเดอร์ที่โค้ด CSS อยู่ 1 รอบ (มาจากโค้ดส่วน ../) แล้วเข้าโฟลเดอร์ fonts (มาจากโค้ดส่วน fonts/) นั่นเองครับ แปลว่า ถ้าเราวางโฟลเดอร์แบบที่เค้าจัดมาเลย คือ ไฟล์ css อยู่ใน /css และไฟล์ fonts อยู่ใน /fonts แบบนี้ก็ใช้งานได้เลยครับ แต่ถ้าวางโฟลเดอร์แตกต่างกันก็ต้องเปลี่ยนตามความเหมาะสมครับ

ขั้นตอนที่ 2) วางโค้ดลงใน HTML เพื่อเรียกใช้

ใส่โค้ดด้านล่างนี้ใน <head> เพื่อเรียกไฟล์ Icon Font ก่อนครับ

<link rel="stylesheet" href="css/thbanklogos.min.css" id="stylesheet">

ถ้าเก็บไว้ที่อื่นนอกจาก /css ก็เปลี่ยน Path ได้ตามโฟลเดอร์ที่เราเก็บไฟล์ CSS ไว้เลยครับ

หลังจากนั้นไปที่หน้าเว็บไซต์ของ Thanakarn Font Icon อีกครั้ง แล้วคลิกบนไอคอนที่ต้องการใช้ ก็จะได้โค้ดมาใช้งานครับ

Icon Fonts Thai Bank Get Code
คลิกเลือกไอคอนที่ต้องการ
Icon Fonts Code Thai
ได้โค้ดพร้อมใช้งาน เอาไปวางในเว็บเราได้เลย

เท่านี้ก็เรียบร้อยครับ เว็บไซต์ของคุณจะโหลดเร็วขึ้น และกราฟฟิกสวยงามล่อใจลูกค้าให้กดซื้อง่ายขึ้นอีกระดับครับ


ต้องขอขอบคุณ Omise และคุณ Julien Vernet & Omise ที่ทำเซ็ตไอคอนดี ๆ แบบนี้ให้เรานำไปใช้กันครับผม หากเจอปัญหาอะไรแจ้งได้เลยครับ

designil

designil

Data engineer & WordPress Developer ทำงานที่บริษัทแคนว่า ซิดนีย์ออสเตรเลีย ปัจจุบันเป็นเจ้าของเว็บไซต์ Designil, DataTH ชอบอ่านบทความใหม่ๆ ตลอดเวลา และชอบสรุปเรื่องราวเกี่ยวกับเทคโนโลยีให้ภาษาที่เข้าใจง่าย ยินดีที่ได้รู้จักทุกคนนะครับ
บทความทั้งหมด