Ülke Bayrağı Görselleri ve İkon Spriteları İndirin

Ülkeleri seçmek, tekli bayrak veya birleşik ikon görseli seçmek, en-boy oranı ve boyutu ayarlamak, ardından ülke bayrağı görselleri oluşturup indirmek için aşağıdaki oluşturucuyu kullanın. Her kontrol için aşağıdaki özellik listesine ve önerilen sıra için aşağıdaki nasıl yapılır adımlarına bakın.

Bu sayfadaki kontroller toplu seçim, bayrak stili, çıktı türü, boyutlandırma, düzen ve dışa aktarma seçeneklerini kapsar. Bayrak görselleri oluştururken kullanılabilen ana seçenekler bunlardır.

• Ülke adlarını seçin: Tam listeden seçim yapın, kıtaya göre filtreleyin (Afrika, Antarktika, Asya, Avrupa, Avustralya, Kuzey Amerika, Güney Amerika), ada göre arayın veya satırları gerektiği gibi işaretleyin veya işaretini kaldırın.
• Ülke kodlarını yapıştırın: Yapıştırma penceresini açın ve ülkeleri toplu olarak bir JavaScript dizisinden (örneğin ['US', 'GB', 'DE']), satır satır ISO kodu listesinden veya virgül, iki nokta, noktalı virgül, sekme veya özel ayırıcı içeren CSV gibi sınırlı bir dizeden seçin. Tabloya yalnızca geçerli kodlar uygulanır; geçersiz girişler Uygula düğmesine basmadan önce bildirilir.
• Bayrak stili: Tekli bayrak indirmesi veya ikon sprite oluşturmadan önce dalgalı bayraklar veya standart dikdörtgen görünümlü düz bayraklar seçin.
• Ülke sırasını karıştır: Ülkelerin sprite ızgarasında görünme sırasını rastgeleleştirin. iso_US gibi ISO sınıf adları aynı kalır; yalnızca her bayrağın tuvaldeki konumu değişir.
• Görsel türünü seçin: Ayrı yeniden boyutlandırılmış görseller için tekli bayrak indir veya seçilen tüm ülke bayraklarını tek bir görselde toplamak için ikon bayrakları oluştur.
• Oranı koru: Genişlik ve yüksekliği 4:3 veya 16:9 en-boy oranına kilitleyin veya özel boyutlar için kilidi kapatın.
• Görsel boyutunu ayarlayın: Her bayrak için genişlik ve yükseklik girin. Limitler tekli bayrak ve ikon modları için farklıdır; böylece spritelar küçük kalır ve tekli indirmeler daha büyük olabilir.
• Görsel oluştur: Seçiminizden yeniden boyutlandırılmış bayrakları veya birleşik ikon tuvalini oluşturun.
• Izgarayı otomatik sığdır: İkon oluşturulduktan sonra seçili ülke sayısına göre satır ve sütunları hesaplaması için araca izin verin.
• Dünya ikonu: Sprite önizlemesinde bayrak görseli olmayan ülkeler için dünya yer tutucusu gösterir.
• PNG, ZIP ve JSON dışa aktar: Yalnızca oluşturulan PNG dosyasını, flag-icons.png ile eşleşen HTML ve CSS dosyalarını içeren bir ZIP arşivini veya React, canvas ve diğer uygulama iş akışları için sprite konumları ve ülke meta verilerini içeren bir JSON dosyasını indirin.
• Bayrak kodu: İkon oluşturulduktan sonra Bayrak kodu bölümünden HTML ve CSS kopyalayın. Çıktı tek bir sprite dosyası (flag-icons.png) kullanır; flags_img ve iso_AF gibi sınıfların her ülke için doğru background-position değerini içerir.

Bu sayfadaki seçeneklerle ülke bayrağı görselleri oluşturmak için şu adımları izleyin.

1. İstediğiniz ülke adlarını seçin. Kıta filtresini veya arama kutusunu kullanın, ardından yalnızca ihtiyacınız olan satırları işaretleyin.
2. Görsel türünü seçin: Ayrı dosyalar için tekli bayrak indir veya tüm seçili bayrakları tek bir görselde toplamak için ikon bayrakları oluştur.
3. İsteğe bağlı olarak oranı koru seçeneğini etkinleştirin ve 4:3 veya 16:9 en-boy oranını seçin.
4. Seçtiğiniz görsel türünün limitleri içinde genişlik ve yükseklik girerek görsel boyutunu ayarlayın.
5. Görseli oluşturun. Yalnızca PNG için görseli indir, görsel ile HTML ve CSS birlikte için ZIP indir veya indirmeden kopyalamak için Bayrak kodu bölümünden HTML ve CSS kopyalayın.

Görsel türü, ayrı dosyalar veya tek sprite alacağınızı belirler. Projenizde bayrakları nasıl kullanacağınıza uygun modu seçin.

İkon modu bir veya daha fazla seçili ülke ile çalışır, ancak dört veya daha fazla bayraklı bir ızgara genelde daha kullanışlı bir sprite düzeni verir. Tekli bayrak modu yalnızca bir ülkeye veya az sayıda ayrı dosyaya ihtiyacınız olduğunda çalışır.

Oranı koru ve görsel boyutunu ayarlayın birlikte çalışır. Oran kilidi açıkken genişlik veya yüksekliği değiştirmek diğer tarafı da günceller; böylece bayraklar orantılı kalır.

• 4:3 en-boy oranı: Kompakt ikonlar ve liste öğeleri için yaygın bir bayrak benzeri şekil.
• 16:9 en-boy oranı: Yatay küçük resimler istediğinizde daha geniş bir çerçeve.
• Bu ön ayarlarla eşleşmeyen özel genişlik ve yüksekliğe ihtiyacınız olduğunda oranı koru seçeneğini kapatın.

Boyut limitleri görsel türüne bağlıdır. İkon modu her bayrağı küçük tutar (yaklaşık 15px ile 100px genişlik) böylece birleşik sprite yönetilebilir kalır. Tekli bayrak modu görüntüleme veya indirme varlıkları için daha büyük genişliklere (yaklaşık 15px ile 1000px) izin verir. Yükseklik aynı mod kurallarını izler.

İkon sprite oluşturduktan sonra önizleme paneli, indirmeden veya kod kopyalamadan önce bayrakların tuvalde nasıl yerleşeceğini ince ayar yapmanızı sağlar.

• Satır ve sütunlar: Sprite ızgarasında kaç bayrak yatay ve dikey görüneceğini kontrol edin.
• Satır aralığı ve sütun aralığı: Bayrak hücreleri arasına yatay veya dikey boşluk ekleyin.
• Dolgu: Birleşik görselin dış kenarına boşluk ekleyin.
• Yarıçap: Daha yumuşak ikonlar istediğinizde bayrak köşelerini yuvarlatılmış kırpma ile yumuşatın.
• Önizleme görseli genişliğine sığdır: Geniş tuvali sayfaya sığdırarak tam sprite'ı inceleyin.
• Güncelle: Düzen değişikliklerinden sonra tuvali yeniden oluşturun; konumlar oluşturulan CSS ile senkron kalır.
• Bayrak kodu: Bayrak kodu bölümünden oluşturulan HTML ve CSS kodunu kopyalayın. Her seçili ülke, paylaşılan sprite üzerinde eşleşen background-position değeriyle bir iso_XX sınıfı alır.
• Görseli indir: Kendi HTML ve CSS dosyalarınız varsa veya yalnızca görsel varlığa ihtiyacınız olduğunda yalnızca oluşturulan PNG sprite'ı dışa aktarın.
• ZIP indir: flag-icons.png dosyasını oluşturulan HTML ve CSS ile birlikte tek bir ZIP içinde dışa aktarın; böylece tam sprite paketi senkron kalır.

Toplam tuval boyutunu araçta gösterilen maksimum genişlik ve yükseklik limitlerinin altında tutun. Çok büyük ızgaralar izin verilen görsel boyutunu aşabilir; boyut uyarısı görürseniz satır, sütun veya ikon boyutunu azaltın. Boşluk veya boyutu değiştirdikten sonra CSS kopyalamadan veya ZIP indirmeden önce önizlemeyi yeniden güncelleyin; konumlar doğru kalır.

İkon bayrakları oluştur modunda Bayrak kodu bölümü, tek bir sprite görseline işaret eden yapıştırmaya hazır kod oluşturur. Her ülke paylaşılan flags_img sınıfı ve o bayrak hücresi için doğru arka plan konumunu ayarlayan iso_AF gibi bir ISO sınıfı kullanır.

HTML örneği bir bayrak kutusunu ülke etiketiyle eşleştirir. CSS örneği flex satırını, paylaşılan sprite boyutunu ve ISO kodu başına bir kural tanımlar. Canlı çıktınız seçtiğiniz ülkeler ve düzenle eşleşecek şekilde güncellenir.

<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 dosyasını CSS dosyanızın yanına yerleştirin (veya url() yolunu güncelleyin), ardından HTML ve CSS kodunu sayfanıza yapıştırın. Görsel, HTML ve CSS'i eşleşen bir paket olarak almak istediğinizde ZIP indir seçeneğini kullanın. Satır, boşluk veya ikon boyutunu değiştirmek piksel konumlarını değiştirir; Güncelle düğmesine bastıktan sonra Bayrak kodunu yeniden kopyalayın veya düzen değişikliklerinden sonra ZIP dosyasını yeniden indirin.

Ülke bayrağı ikonları birçok ürün yüzeyinde görünür. Bu araçtan alınan görseller için yaygın kullanım alanları şunlardır.

• Web sitesi başlıklarındaki dil ve bölge değiştiriciler
• Telefon veya adres formlarının yanındaki ülke seçim alanları
• Mağaza bulucular, kargo seçenekleri ve ödeme ülke listeleri
• Analitik veya kullanıcıları ülkeye göre gruplayan panolar
• Mevcut yerel ayarları gösteren mobil uygulama ayar ekranları
• Desteklenen pazarları vurgulayan pazarlama sayfaları
• Tek bir PNG isteğiyle her ülke adının yanında bayrak gösteren CSS sprite listeleri

İşaretleme veya uygulama verisinde ISO kodları ve etiketlere de ihtiyacınız olduğunda bayrak ikonlarını ülke adları açılır listesi veya JSON ülke listesiyle birlikte kullanın. İlgili bağlantılar ilgili araçlar bölümünde listelenmiştir.

Tekli bayrak indirme, ikon spriteları, CSS background-position, en-boy oranı, boyut limitleri, düzen seçenekleri ve ilgili SVG bayraklar hakkında sık sorulan soruların yanıtları.

SVG bayraklar, ülke açılır listesi işaretlemesi veya başka bir formatta ülke verisi gerekiyor mu? Bu sayfalar yakın iş akışlarını kapsar.

• SVG ülke bayrakları indirme ölçeklenebilir vektör bayraklar ve SVG kodu için.
• HTML ülke adları açılır listesi ISO kodları ve etiketlerle seçim listeleri için.
• JavaScript ülke adları dizisi JSON ve nesne ülke listeleri için.
• PHP ülke adları dizisi sunucu tarafı ülke verisi için.
• Görsel araçları merkezi diğer görsel indirme ve dönüştürme sayfaları için.
• Görselden WebP dönüştürücü dışa aktarılan bayrak PNG dosyalarını optimize etmek istediğinizde.