ดาวน์โหลด flag icons - flag icons ดาวน์โหลดซอร์สโค้ด

flag icons

ซอร์สโค้ดอื่น ๆ

7.2.3

ดาวน์โหลด

ไอคอนรูปธง

คอลเลกชันธงของประเทศทั้งหมดใน SVG ที่คัดสรรมาอย่างดี — รวมถึง CSS เพื่อการบูรณาการที่ง่ายขึ้น ดูการสาธิต

ติดตั้ง

คุณสามารถดาวน์โหลดโปรเจ็กต์ทั้งหมดตามที่เป็นอยู่หรือติดตั้งผ่านทาง npm หรือ Yarn:

npm install flag-icons
# or
yarn add flag-icons

การใช้งาน

ก่อนอื่นคุณต้องนำเข้า css:

 import "/node_modules/flag-icons/css/flag-icons.min.css" ;

หรือใช้ CDN:

 < link
  rel =" stylesheet "
  href =" https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css "
/>

สำหรับการใช้แฟล็กอินไลน์พร้อมข้อความ ให้เพิ่มคลาส .fi และ .fi-xx (โดยที่ xx คือรหัส ISO 3166-1-alpha-2 ของประเทศ) ลงใน <span> ที่ว่างเปล่า หากคุณต้องการมีแฟล็กเวอร์ชันกำลังสอง ให้เพิ่ม class fis ด้วยเช่นกัน ตัวอย่าง:

 < span class =" fi fi-gr " > </ span > < span class =" fi fi-gr fis " > </ span >

คุณสามารถใช้สิ่งนี้กับองค์ประกอบใดก็ได้ แต่ในกรณีนี้คุณจะต้องใช้ fib แทน fi และคุณก็พร้อมแล้ว สิ่งนี้จะเพิ่มพื้นหลังที่ถูกต้องด้วยคุณสมบัติ CSS ต่อไปนี้:

 background-size : contain;
background-position : 50 % ;
background-repeat : no-repeat;

ซึ่งหมายความว่าแฟล็กจะปรากฏขึ้นตรงกลางองค์ประกอบ ดังนั้นคุณจะต้องตั้งค่าอัตราส่วนที่ถูกต้องเป็น 4 คูณ 3 ด้วยตนเอง หรือหากเป็นกำลังสอง ให้เพิ่มคลาส flag-icon-squared ด้วย