الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

أيقونات العلم

مجموعة منسقة من جميع أعلام الدول بتنسيق 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> . إذا كنت ترغب في الحصول على علامة إصدار مربعة، فقم بإضافة الفئة 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 .

تطوير

قم بتشغيل yarn لتثبيت التبعيات بعد استنساخ المشروع وستكون قادرًا على:

لإنشاء ملفات *.scss 

$ yarn build

لتقديمه على localhost:8000 

$ yarn start

لكي يكون لديك بلدان محددة فقط في ملف css، قم بإزالة البلدان التي لا تحتاج إليها من ملف _flag-icons-list.scss وأنشئه مرة أخرى.

الاعتمادات

  • لن يكون هذا المشروع موجودًا بدون المجموعة الرائعة والمحذوفة الآن من أعلام SVG بواسطة koppi.
  • شكرًا لك Andrejs Abrickis على توفير اسم flag-icons على npm.
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل