کتابخانه
flag-icons یه کتابخونه متن باز و رایگان از پرچم کشورهاست که همه پرچم ها رو به شکل SVG و با CSS آماده داره. با چند تا کلاس ساده می تونی پرچم هر کشور رو کنار منوی زبان، فیلد تلفن یا انتخاب کشور نشون بدی، بدون اینکه برای هر پرچم یه تصویر جدا بسازی.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۳٫۸ مگابایت· ۵۴۷ فایل· انتشار
SHA-256: b723de0659d95b6a966c0175850882b7daa8e923a0392ca6bc906e9be16baf02
هر سایتی که از مرز یه کشور بیرون بزنه، دیر یا زود به پرچم نیاز پیدا می کنه. منوی انتخاب زبان، فیلد تلفن با پیش شماره کشور، انتخاب کشور مقصد توی فروشگاه، یا جدولی که کشورها توش لیست شدن. پیدا کردن پرچم ها یکی یکی، هم اندازه کردنشون و سر و کله زدن با PNG های محو و سنگین حسابی حوصله سربره. flag-icons همین کار رو راحت می کنه: مجموعه ای مرتب از پرچم همه کشورها به شکل SVG، به اضافه CSS که استفاده از اون ها رو توی صفحه ساده می کنه. سازنده اش Panayiotis Lipiridis هست و با مجوز MIT منتشر شده. یعنی برای پروژه شخصی و تجاری آزاده، فقط نباید متن مجوز رو حذف کنی.
چون پرچم ها SVG هستن، توی هر اندازه ای تیز می مونن و صفحه رو سنگین نمی کنن. هر پرچم یه کلاس CSS داره که از کد دو حرفی استاندارد کشور (همون کدهای ISO) ساخته می شه. از هر پرچم دو شکل هست: نسبت چهار به سه که حالت معمول پرچمه، و نسخه مربعی که برای آواتار و دکمه های گرد خیلی به کار میاد. اندازه پرچم هم معمولا با font-size المانش تنظیم می شه، پس مثل متن باهاش رفتار می کنی.
این کتابخونه جایی به درد می خوره که چند تا پرچم لازم داری: سایت چندزبانه، فرم ثبت نام با انتخاب کشور، فروشگاهی که به چند کشور ارسال داره، یا قالب و افزونه ای که خودت می نویسی. ولی اگه فقط یکی دو تا پرچم می خوای، کل CSS رو بارگذاری نکن. همون SVG رو مستقیم توی صفحه بذار، هم ساده تره هم سبک تر.
توی انتخاب پرچم یه نکته رو یادت نره: زبان و کشور یکی نیستن. انگلیسی رو با پرچم آمریکا نشون می دی یا انگلیس؟ فارسی رو با پرچم ایران، ولی افغانستان و تاجیکستان چی؟ برای منوی زبان بهتره کنار پرچم اسم زبان هم نوشته بشه. یه چیز دیگه: اسم کلاس ها بین نسخه های مختلف فرق کرده. پس CSS و کدی که توی صفحه می ذاری باید از یه نسخه باشن و مستنداتی که می خونی هم مال همون نسخه.
برای سایت های ایرانی بهتره فایل ها رو روی هاست خودت بذاری و به CDN خارجی وصل نشی. توی روزهای محدودیت اینترنت بین الملل، پرچم ها به جای لود شدن خالی می مونن. نسخه های رسمی و بدون تغییر flag-icons توی مخزن داخلی ما هم هست؛ می تونی بدون اینترنت بین الملل دانلودش کنی و روی هاست خودت بذاری.
استفاده از flag-icons سه چهار قدم بیشتر نیست و برای وردپرس و سایت های معمولی یکسانه.
توی وردپرس برای بارگذاری CSS می تونی از wp_enqueue_style توی functions.php قالب یا افزونه ات استفاده کنی. اگه پروژه ات با npm کار می کنه، بسته رو با اسم flag-icons نصب کن و CSS رو توی فایل های پروژه import کن.
یه مجموعه پرچم کشورها به شکل SVG همراه با CSS آماده است. برای نشون دادن پرچم توی منوی زبان، فیلد شماره تلفن، انتخاب کشور، لیست ارسال فروشگاه و هر جای دیگه ای که پرچم لازم داری به کار میاد، بدون اینکه تصویر جدا بسازی.
بله، مجوزش MIT هست و استفاده شخصی و تجاری رو آزاد می ذاره. یعنی لازم نیست از سازنده اجازه بگیری یا هزینه ای بدی، و می تونی کتابخونه رو توی پروژه مشتری هم بذاری. فقط باید متن مجوز و نام سازنده رو توی فایل ها نگه داری و حذف نکنی. اگه شک داشتی، فایل مجوز داخل بسته رو بخون.
معمولا اندازه پرچم با font-size المانش تنظیم می شه، پس با عوض کردن اون، اندازه پرچم هم عوض می شه. اگه اندازه دقیق می خوای، width و height رو توی CSS خودت بنویس. برای شکل مربعی هم از نسخه مخصوصش استفاده کن.
بله، به CDN خارجی نیازی نیست. فایل های CSS و SVG رو روی هاست خودت می ذاری و مسیرشون رو توی صفحه درست می دی. این طوری وقتی اینترنت بین الملل محدود می شه هم پرچم ها بدون مشکل لود می شن.
می تونی، ولی پرچم نماینده کشوره، نه زبان. انگلیسی و عربی توی چند کشور صحبت می شن و انتخاب یه پرچم می تونه گمراه کننده باشه. بهتره کنار پرچم اسم زبان رو هم بنویسی تا کاربر مطمئن بشه، و پرچم بیشتر نقش تزئینی داشته باشه تا راهنمای اصلی.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.