دریافت کیت

CPIK · کیت آیکون

برندهای ایرانی، در یک کیت آیکون.

کیت CPIK آیکون بانک‌ها، پلتفرم‌ها، سرویس‌ها و برندهای ایرانی را یک‌جا می‌دهد. یک فایل استایل را لینک کنید تا هر آیکون با یک نام کلاس در دسترس باشد؛ در هر اندازه‌ای واضح می‌ماند و مثل متن کنارش با CSS رنگ می‌گیرد. لوگوها متعلق به صاحبانشان است.

دسته

راهنمای استفاده

فایل استایل را اضافه کنید، آیکون را انتخاب کنید و کد HTML آن را در صفحه بگذارید. با کلید / به جستجو بروید و با کلیدهای جهت میان آیکون‌ها جابه‌جا شوید.

۱افزودن استایل

فایل cpik.css و فونت‌های WOFF و WOFF2 آن را کنار هم در پوشه‌ی assets/cpik بگذارید و این خط را در head صفحه اضافه کنید.

<link rel="stylesheet" href="./assets/cpik/cpik.css">

یا بدون کپی فایل‌ها، آن را از jsDelivr بارگذاری کنید:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cyclone9/cpik/dist/cpik.css">

۲افزودن آیکون

هر آیکون فقط یک کلاس دارد. دکمه‌ی کپی هر کارت را بزنید و کد را هر جا خواستید بگذارید.

<i class="cpik-cyclone-cpik" aria-hidden="true"></i>

۳اندازه و رنگ

آیکون مثل متن است: اندازه را با font-size و رنگ را با color تنظیم کنید.

.cpik-cyclone-cpik {
  font-size: 48px;
  color: #4A5CF0;
}

۴پیش‌نمایش

همان آیکون در ۱۶، ۳۲ و ۶۴ پیکسل.

فایل cpik.js فقط برای همین صفحه است و آیکون‌ها به JavaScript نیاز ندارند. اگر دکمه‌ای فقط آیکون دارد، به خود دکمه یک نام دسترس‌پذیر مثل aria-label بدهید.

کیت با مجوز MIT منتشر شده است. لوگوها متعلق به صاحبانشان است و استفاده از آن‌ها به معنای همکاری با آن برندها نیست.

64px
نام انگلیسی
کلاس
کدپوینت
دسته
افزوده در نسخه