ICON FONT ธนาคารไทย ใช้งานฟรี พร้อมขั้นตอนการใช้งาน

รับทําเว็บไซต์เชียงใหม่ ICON FONT ธนาคารไทย ใช้งานฟรี พร้อมขั้นตอนการใช้งาน

ICON FONT ธนาคารไทย ใช้งานฟรี พร้อมขั้นตอนการใช้งาน สำหรับเว็บ E-Commerce ในส่วนของการชำระสินค้าหรือการทำธุรกรรมต่างๆ ด้านการเงินนั้น การที่เรามีไอคอนธนาคารสวยๆ ภาพคมชัด ย่อขยายแล้วไม่แตก นั้นเป็นสิ่งสำคัญที่จะดึงดูดลูกค้าให้กดซื้อได้ง่ายขึ้นอีกระดับ แต่นักออกแบบหลายท่านคงจะเคยประสบกับปัญหา หารูป icon ธนาคารมาใช้กับเว็บไซต์ร้านค้าออนไลน์ แล้วเจอแต่รูปเล็กๆ ภาพแตก พื้นหลังไม่โปร่งแสง จะดัด vector เองก็ขี้เกียจ และปัญหายุ่งยากต่างๆอีกมากมาย ซึ่งนับว่า Icon Font นี้จะทำให้เว็บของคุณโหลดเร็วขึ้น แถมกราฟฟิกสวยงาม ใช้แล้วชีวิตจะง่ายขึ้นอีกเยอะเลยล่ะคะ

ก่อนอื่นเรามารู้จักกับ Icon Font กันก่อนนะคะ ซึ่งมันก็คือการที่เราเอาไอคอนมาทำเป็นฟ้อนต์ เพราะมันเกิดขึ้นมาจาก Vector หรือการวาดรูปด้วยรูปทรงเลขาคณิต หรือเส้น วาดในโปรแกรมพวก Adobe Illustrator ซึ่งไม่ใช่จุดสีทีละ 1 Pixel แบบรูป PNG หรือที่เรียกว่า Raster วาดในโปรแกรมพวก Adobe Photoshop นั่นเองคะ โดยการใช้ Icon Font จะทำให้เรารวมทุกไอคอนในไฟล์ฟ้อนต์ไฟล์เดียวได้ ทำให้เราโหลดไฟล์แค่ 1 ไฟล์เท่านั้น โดยใช้ CSS3 Font Face ในการโหลดไฟล์ฟ้อนต์เข้ามาใช้นั่นเองคะ

และจุดเด่นอีกอย่างของ Icon Font ก็คือ พอเราเอามาใส่ในหน้าเว็บไซต์ มันจะเหมือนเราใส่ตัวหนังสือ 1 ตัวคะ ทำให้เราสามารถใช้ CSS ตกแต่งได้ตามสะดวกเลย ไม่ว่าจะใส่สีด้วย color, ปรับขนาดด้วย font-size, ใส่เงาด้วย font-shadow, หรือแม้แต่หมุนไอคอนด้วย CSS3 Transform ก็ทำได้ค่ะและที่สำคัญคือ Icon Font ใช้ง่ายมาก ๆ เพราะเค้าทำแบบสำเร็จรูปมาให้เราใช้เรียบร้อยแล้วแถมยังฟรีอีกต่างหาก โดยไอคอนเซ็ตนี้มีโลโก้ของ 31 ธนาคาร ออกแบบโดย Omise และแปลงเป็น Icon Font โดยคุณ Julien Vernet โดยไอคอนที่มีในเซ็ตนี้ก็มีครบ เหมาะมากกับการเอาไปใช้กับเว็บไซต์ E-Commerce ส่วนจะมีวิธีการใช้งานยังไงนั้นเรามาดูกันเลยคะ

ก่อนอื่นเลยเราต้องเข้าไปที่เว็บไซต์ Thanakarn Icon Font แล้วกดปุ่ม Download สีเขียวได้เลยค่ะ พอแตกไฟล์ ZIP ออกมาจะเจอ 2 โฟลเดอร์ คือ /css กับ /fonts ค่ะ จากนั้นก็เริ่มใส่ Icon Font ในเว็บของเราตามขั้นตอนเลยคะ

1. ก็อปปี้โฟลเดอร์ /fonts ไปใส่ในโฟลเดอร์เว็บไซต์ของเรา ส่วนไฟล์ CSS เค้าจะมีมาให้ 3 ไฟล์ เลือกก็อปปี้ไฟล์ thbanklogos.min.css ไปใช้ได้เลยค่ะหรืออีกวิธี คือก็อปปี้โค้ดในไฟล์ thbanklogos-colors.css กับ thbankslogo.css ไปใส่ในไฟล์ CSS ของเราก็ได้ค่ะ

 

2. จากนั้นก็วางโค้ดลงใน HTML เพื่อเรียกใช้คะ หรือถ้าเก็บไว้ที่อื่นนอกจาก /css ก็เปลี่ยน Path ได้ตามโฟลเดอร์ที่เราเก็บไฟล์ CSS ไว้เลยคะ

 

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

icon-fonts-code-download

select-thai-bank-font-icons

4. เพียงเท่านี้เราก็จะได้ ICON FONT ธนาคารไทย ที่กราฟฟิกสวยๆ ที่ใช้งานง่ายแสนง่าย แถมยังใช้งานฟรีอีกด้วยคะ

 

 

 

 

สมัครรับข่าวสารเพื่อให้ข้อความไม่เด้งอีก

อัพเดทสาระความรู้และเทคนิคมากมายเกี่ยวกับ รับทำเว็บไซต์ การออกแบบ การตลาดออนไลน์

ขอบคุณค่ะ