Website Materials

แจก Bootstrap Icons Kit สำหรับชาว WordPress

Thanak0rnnn

01 Aug 2023 — 1 min read

BSGIVE

Why?

เหตุเกิดจากนั่งทำเว็บให้ลูกค้าอยู่ แต่ติดเงื่อนไขใหญ่ตรงที่มีความจำเป็นจะต้องไปใช้ Gutenberg Addons อื่นนอกจาก GenerateBlocks ซึ่งไม่รองรับการใส่ SVG Code เข้าไปตรง ๆ แล้วส่วนตัวดันไปติดอกชอบใจเจ้า Bootstrap Icons เข้าซะแล้ว จึงหาวิธีอยู่พักใหญ่ที่จะเอาเจ้า Bootstrap Icons นี้มาใช้ต่อให้ได้

How?

จึงค้นพบว่าทั้ง Kadence Blocks Pro, Stackable Pro ที่ใช้อยู่ก็รองรับการเพิ่ม Custom Icons ทั้งคู่ เพียงแต่ต้องมีไฟล์ json ให้มันก็เท่านั้น เลยไปค้นหากลวิธีอยู่หลายนาที จนค้นพบเข้าและทำได้สำเร็จจนได้ครับ โดยการใช้เจ้า IcoMoon ช่วยสร้าง json ให้ก็เท่านั้น

That's working?

จากการที่ลองก็สามารถใช้งานได้ผ่านการอัปโหลดเจ้า selection.json ที่ IconMoon ช่วยสร้างให้ ลงไปใน Kadence Blocks Pro ก็พบว่าสามารถใช้งานได้ตามปกติครับ

ภาพหลังจากลอง upload json ไปที่ Kadence Pro

Bonus

จึงเอามาแบ่งปันให้สำหรับท่านใดที่ประสบปัญหาเดียวกัน คือหลงรักเจ้า Bootstrap icons เข้าให้แล้วแต่ไม่สามารถนำมาใช้งานกับ WordPress ได้ซะที นอกจากนี้ ใน Zip ยังมีไฟล์ SVG ทุกตัวซึ่งโหลดตรงจาก Bootstrap Release (V10.10.05) และมีไฟล์ Fonts อยาก TTF, หรือ WOFF, WOFF2 ให้ด้วยครับ

Bootstrap10-10-5-Kit-Thanak0rnnn Download

(เปลี่ยนนามสกุลไฟล์จาก PDF เป็น ZIP และใช้งานได้เลยคร้าบ)

https://ghostcm.buildwithtk.co/content/files/2026/04/bootstrap10-10-5-kit-thanak0rnnn-pdf-1.zip

Useful Links

Bootstrap icons pack : https://github.com/twbs/icons/releases
Bootstrap icons list: https://icons.getbootstrap.com/
IcoMoon App: https://icomoon.io/app/

Coming soon

This is Buildwithtk.co, a brand new site by Thanakorn K that's just getting started. Things will be up and running here shortly, but you can subscribe in the meantime if you'd like to stay up to date and receive emails when new content is published!

ราคาน้ำมันวันนี้เป็นไงบ้าง ? พร้อมเครื่องมือการคำนวณค่าเดินทาง และรูปภาพตัวอย่างหน้าเว็บไซต์

เช็คราคาน้ำมันวันนี้ เปรียบเทียบทุกปั๊ม พร้อมคำนวณค่าเดินทางได้ทันที!

ราคาน้ำมันขึ้น ๆ ลง ๆ ทุกวัน เลือกเติมปั๊มไหนดี? วันนี้เราทำเครื่องมือง่าย ๆ มาให้ใช้กันฟรี ไม่ต้องโหลดแอป ไม่ต้องสมัครสมาชิก เปิดเว็บก็เช็คได้เลย! ⛽ ฟีเจอร์หลัก ดูราคาน้ำมันแยกปั๊ม: เปรียบเที

THAID อ่านว่า ไทยดี หรือ ไทยไอดี แล้วใช้ยังไง ?

สรุปแล้ว แอปพลิเคชั่น "ThaiD" อ่านว่าอะไรกันแน่ หลายคนสับสนและยังคงหยิบยกขึ้นมาเป็นบทสนทนาได้ตลอด กับประเด็นของชื่อแอปฯ THAID "ไทยดี" หรือ "ไทยไอดี" ก็ต้องแจ้งตามตรงเลยครับว่า ถ้าอ่านตามที่แอปฯ ได้ระบุชื่อไว้ ก็คงต้องอ่

WordPress คืออะไร? ต่างจาก Wix และ Drupal ยังไง เลือกใช้อะไรดีที่สุด?

สร้างเว็บไซต์ด้วยอะไรดี ในปลาย 2025 เราช่วยเปรียบเทียบ 3 Builder แบบละเอียด เพื่อช่วยคุณเลือกสิ่งที่เหมาะที่สุด ทั้งเรื่องการใช้งาน ราคา และความยืดหยุ่นให้ครบ จบในบทความเดียว!