free-thai-bank-font-icon

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

วันก่อนคุณ 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 ธนาคารไทยในเว็บไซต์

ก่อนอื่นเลยเข้าไปที่เว็บไซต์ Thanakarn Icon Font แล้วกดปุ่ม Download สีเขียวได้เลยครับ

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

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

แกะ ZIP ออกมาจะได้แบบนี้ครับ

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

ให้ก็อปปี้โฟลเดอร์ /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 ที่ทำเซ็ตไอคอนดี ๆ แบบนี้ให้เรานำไปใช้กันครับผม หากเจอปัญหาอะไรแจ้งได้เลยครับ




There are no comments

Add yours

ไม่อยากพลาดบทความดี ๆ ด้าน Web Design, HTML5, CSS3 ใช่มั้ย ?

มาร่วมเป็นส่วนหนึ่งของสมาชิกกว่า 2,500+ คนของ Designil และรับบทความใหม่ ๆ ส่งตรงถึงอีเมลคุณ! (ไม่มีแสปม 100%)

สมัครสมาชิกเรียบร้อยแล้ว! กรุณาเช็คอีเมลของคุณเพื่อกดยืนยันการสมัครสมาชิก