تحميل صور أعلام الدول وصور أيقونات مجمّعة

استخدم المولّد أدناه لاختيار الدول، واختيار أعلام منفصلة أو صورة أيقونات مجمّعة، وضبط نسبة العرض إلى الارتفاع والحجم، ثم إنشاء وتنزيل صور أعلام الدول. راجع قائمة الميزات أدناه لكل عنصر تحكم، وخطوات الاستخدام أدناه للترتيب الموصى به.

تغطي عناصر التحكم في هذه الصفحة الاختيار الجماعي، نمط العلم، نوع المخرجات، الحجم، التخطيط، والتصدير. هذه هي الخيارات الرئيسية المتاحة أثناء إنشاء صور الأعلام.

• اختيار أسماء الدول: اختر من القائمة الكاملة، صفِّ حسب القارة (أفريقيا، أنتاركتيكا، آسيا، أوروبا، أستراليا، أمريكا الشمالية، أمريكا الجنوبية)، ابحث بالاسم، أو حدّد وألغِ تحديد الصفوف حسب الحاجة.
• لصق رموز الدول: افتح مربع اللصق واختر الدول دفعة واحدة من مصفوفة JavaScript (مثلاً ['US', 'GB', 'DE'])، أو قائمة بسطر لكل رمز ISO، أو نصاً مفصولاً مثل CSV بفاصلة أو نقطتين أو فاصلة منقوطة أو tab أو فاصل مخصص. تُطبَّق الرموز الصالحة فقط على الجدول؛ تُبلَّغ الإدخالات غير الصالحة قبل النقر على Apply.
• نمط العلم: اختر أعلاماً متموجة بتأثير تموج أو أعلاماً مسطحة بمظهر مستطيل قياسي قبل إنشاء تنزيلات العلم الواحد أو sprite الأيقونات.
• خلط ترتيب الدول: اعشوئية ترتيب ظهور الدول في شبكة sprite. تبقى أسماء classes ISO مثل iso_US كما هي؛ يتغيّر موضع كل علم على canvas فقط.
• اختيار نوع الصورة: Download single flag لصور منفصلة بحجم معدّل، أو create icon flags لوضع كل أعلام الدول المختارة في صورة واحدة.
• Keep ratio: اقفل العرض والارتفاع على نسبة 4:3 أو 16:9، أو أوقف القفل لأبعاد مخصصة.
• ضبط حجم الصورة: أدخل العرض والارتفاع لكل علم. تختلف الحدود بين وضع العلم الواحد ووضع الأيقونة حتى تبقى sprites صغيرة ويمكن أن تكون التنزيلات المنفصلة أكبر.
• إنشاء الصورة: ابنِ الأعلام بحجم معدّل أو canvas الأيقونات المجمّع من اختيارك.
• ملاءمة الشبكة تلقائياً: بعد إنشاء الأيقونات، دع الأداة تحسب الصفوف والأعمدة من عدد الدول المحددة بدلاً من ضبطها يدوياً.
• أيقونة الكرة الأرضية: عرض عنصر نائب للكرة الأرضية للدول التي لا تملك صورة علم في معاينة sprite.
• تصدير PNG وZIP وJSON: نزّل PNG المُنشأ فقط، أو أرشيف ZIP يتضمن flag-icons.png مع ملفات HTML وCSS المطابقة، أو ملف JSON بمواضع sprite وبيانات الدول لـ React وcanvas وسير عمل التطبيقات الأخرى.
• كود العلم: بعد إنشاء الأيقونات، انسخ HTML وCSS من قسم كود العلم. المخرجات تستخدم ملف sprite واحداً (flag-icons.png) مع classes مثل flags_img و iso_AF، لكل منها background-position الصحيح لتلك الدولة.

اتبع هذه الخطوات لإنشاء صور أعلام الدول بخيارات هذه الصفحة.

1. اختر أسماء الدول التي تريدها. استخدم مرشح القارة أو مربع البحث، ثم حدّد الصفوف التي تحتاجها فقط.
2. اختر نوع الصورة: Download single flag لملفات منفصلة، أو create icon flags لكل الأعلام المحددة في صورة واحدة.
3. يمكنك تفعيل Keep ratio واختيار نسبة 4:3 أو نسبة 16:9.
4. اضبط حجم الصورة بإدخال العرض والارتفاع ضمن حدود نوع الصورة المختار.
5. أنشئ الصورة. استخدم Download Image للـ PNG فقط، أو Download zip للصورة مع HTML وCSS في ملف واحد، أو انسخ HTML وCSS من قسم كود العلم بدون تنزيل.

يتحكم نوع الصورة في ما إذا تحصل على ملفات منفصلة كثيرة أو sprite واحد. اختر الوضع الذي يطابق كيفية استخدام الأعلام في مشروعك.

يعمل وضع الأيقونة مع دولة واحدة أو أكثر، لكن شبكة من أربعة أعلام أو أكثر عادةً تعطي تخطيط sprite أكثر فائدة. يعمل وضع العلم الواحد عندما تحتاج دولة واحدة فقط أو مجموعة صغيرة من الملفات المنفصلة.

يعمل Keep ratio وضبط حجم الصورة معاً. عند تفعيل قفل النسبة، يحدّث تغيير العرض أو الارتفاع الجانب الآخر حتى تبقى الأعلام متناسبة.

• نسبة 4:3: شكل شائع يشبه العلم للأيقونات المدمجة وعناصر القائمة.
• نسبة 16:9: إطار أعرض عندما تريد صوراً مصغّرة بأسلوب landscape.
• أوقف Keep ratio عندما تحتاج عرضاً وارتفاعاً مخصصين لا يطابقان هذه الإعدادات المسبقة.

تعتمد حدود الحجم على نوع الصورة. يحافظ وضع الأيقونة على كل علم صغيراً (حوالي 15px إلى 100px عرضاً) حتى يبقى sprite المجمّع قابلاً للإدارة. يسمح وضع العلم الواحد بعرض أكبر (حوالي 15px إلى 1000px) لعرض الأصول أو تنزيلها. يتبع الارتفاع نفس قواعد الوضع.

بعد إنشاء sprite الأيقونات، تتيح لوحة المعاينة ضبط موضع الأعلام على canvas قبل التنزيل أو نسخ الكود.

• الصف والأعمدة: تحكم في عدد الأعلام عبر وأسفل شبكة sprite.
• تباعد الصف وتباعد العمود: أضف فجوات عمودية أو أفقية بين خلايا الأعلام.
• الحشو: أضف مساحة حول الحافة الخارجية للصورة المجمّعة.
• نصف القطر: نعّم زوايا العلم بقص مستدير عندما تريد أيقونات أكثر نعومة.
• ملاءمة حجم صورة المعاينة: اجعل canvas عريضاً يتسع في الصفحة لمراجعة sprite كاملاً.
• تحديث: أعد بناء canvas بعد تغييرات التخطيط حتى تبقى المواضع متزامنة مع CSS المُنشأ.
• كود العلم: انسخ HTML وCSS المُنشأ من قسم كود العلم. يحصل كل دولة محددة على class iso_XX مع background-position مطابق على sprite المشترك.
• Download Image: صدّر sprite PNG المُنشأ فقط عندما يكون لديك HTML وCSS خاص بك، أو عندما تحتاج أصل الصورة فقط.
• Download zip: صدّر flag-icons.png مع HTML وCSS المُنشأين في ZIP واحد حتى تبقى حزمة sprite كاملة متزامنة.

حافظ على إجمالي canvas ضمن حدود العرض والارتفاع القصوى التي يعرضها الأداة. قد تتجاوز الشبكات الكبيرة جداً الحجم المسموح؛ قلّل الصفوف أو الأعمدة أو حجم الأيقونة إذا ظهر تحذير الحجم. بعد تغيير التباعد أو الحجم، حدّث المعاينة مجدداً قبل نسخ CSS أو تنزيل ZIP حتى تبقى المواضع دقيقة.

في وضع create icon flags، يُنشئ قسم كود العلم كوداً جاهزاً للنسخ يشير إلى صورة sprite واحدة. تستخدم كل دولة class flags_img مشتركة مع class ISO مثل iso_AF يحدد إزاحة background الدقيقة لخلية العلم.

عيّنة HTML تربط صندوق العلم باسم الدولة. عيّنة CSS تحدد صف flex، حجم sprite المشترك، وقاعدة واحدة لكل رمز ISO. يتحدّث المخرج المباشر ليتوافق مع الدول والتخطيط الذي اخترته.

<div class="flex-box">
    <div class="flags_img iso_AF"></div>
    <div>Afghanistan</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_AX"></div>
    <div>Aland Islands</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_AL"></div>
    <div>Albania</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_DZ"></div>
    <div>Algeria</div>
</div>

.flex-box {
    display: flex;
    justify-content: start;
    align-items: center;
}

.flags_img {
    background-image: url('flag-icons.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 50px;
    height: 28px;
    background-color: transparent;
    vertical-align: middle;
    background-position: 51px 29px;
    margin: 8px;
}

.iso_AF {background-position: 0 0}
.iso_AL {background-position: -102px 0}
.iso_AX {background-position: -51px 0}
.iso_DZ {background-position: -153px 0}

ضع flag-icons.png بجانب CSS (أو حدّث مسار url())، ثم الصق HTML وCSS في صفحتك. يُفضّل Download zip عندما تريد الصورة وHTML وCSS في حزمة متطابقة واحدة. تغيير الصفوف أو التباعد أو حجم الأيقونة يغيّر إزاحات البكسل، لذا انقر Update وانسخ كود العلم المحدّث أو نزّل ZIP مجدداً بعد تغييرات التخطيط.

تظهر أيقونات أعلام الدول في كثير من واجهات المنتج. هذه أماكن شائعة لاستخدام الصور من هذه الأداة.

• مبدّلات اللغة والمنطقة في ترويسات المواقع
• حقول اختيار الدولة بجانب نماذج الهاتف أو العنوان
• محدّدات المتاجر وخيارات الشحن وقوائم الدول في الدفع
• لوحات معلومات تجمّع التحليلات أو المستخدمين حسب الدولة
• شاشات إعدادات تطبيقات الجوال التي تعرض اللغات المتاحة
• صفحات تسويق تبرز الأسواق المدعومة
• قوائم CSS sprite تعرض علماً بجانب اسم كل دولة من طلب PNG واحد

اجمع أيقونات الأعلام مع قائمة منسدلة لأسماء الدول أو قائمة JSON للدول عندما تحتاج أيضاً رموز ISO وتسميات في الوسوم أو بيانات التطبيق. الروابط ذات الصلة في قسم الأدوات ذات الصلة.

إجابات على الأسئلة الشائعة حول تنزيل العلم الواحد، sprites الأيقونات، مواضع CSS background-position، نسبة العرض إلى الارتفاع، حدود الحجم، خيارات التخطيط، وأعلام SVG ذات الصلة.

تحتاج أعلام SVG أو وسوم قائمة منسدلة للدول أو بيانات دول بتنسيق آخر؟ تغطي هذه الصفحات سير عمل قريبة.

• تنزيل أعلام الدول SVG لأعلام vector قابلة للتوسيع وكود SVG.
• قائمة منسدلة HTML لأسماء الدول لقوائم select مع رموز ISO وتسميات.
• مصفوفة JavaScript لأسماء الدول لقوائم JSON وكائنات الدول.
• مصفوفة PHP لأسماء الدول لبيانات الدول من جانب الخادم.
• مركز أدوات الصور لصفحات تنزيل وتحويل الصور الأخرى.
• محوّل الصورة إلى WebP عندما تريد تحسين ملفات PNG للأعلام المُصدَّرة.