راهنمای توسعه‌دهندگان

در این صفحه، شما روش‌های دانلود آیکون‌ست گربه و استفاده از آن را در پروژه‌ی خود خواهید دید.

دریافت آیکون‌ست گربه

آیکون‌های گربه در فرمت‌های مختلف، برای پلتفرم‌های متفاوت وجود دارند. شما به عنوان یک توسعه‌دهنده می‌توانید بر اساس نیاز پروژه و اپ خود، گربه را دریافت و استفاده کنید.

دانلود همه چیز

برای داشتن کل آیکون‌های گربه، آخرین نسخه‌ی پایدار را مستقیما از شاخه‌ی master دانلود کنید (حدود ۷ مگابایت).

مخزن گیت

آیکون‌های گربه در مخزن گیت آن که شامل تمامی آیکون‌ها و فرمت‌ها می‌شود بر روی گیتهاب وجود دارد.

$ git clone https://github.com/IKAcc/Gorbeh.git

آیکون‌فونت برای وب

استفاده از آیکون‌فونت گربه راحت‌ترین روش برای استفاده از آیکون‌های گربه در پروژه‌های وب است. ما تمام آیکون‌های متریال و گربه را به صورت بهینه در یک فونت به صورت بهینه بسته‌بندی کرده‌ایم که از توانایی‌های مرورگرهای مدرن برای رندر تایپوگرافی بهره می‌برد تا توسعه‌دهندگان وب بتوانند تنها با چند خط کد، آیکون‌ها را در پروژه‌ی خود استفاده کنند.

استفاده از فونت نه تنها راحتترین راه است؛ بلکه کارآمد بوده و عالی به نظر می‌رسد.

  • بیش از ۹۵۰ آیکون تنها در یک فایل کوچک.

  • پشتیبانی شده توسط تمام مرورگرهای مدرن.

  • کنترل رنگ، اندازه، انیمیشن و غیره با css خالی.

  • وکتوری: در هر اندازه‌ای، در هر صفحه‌ی نمایشی عالی نمایش داده خواهد شد.

آیکون‌ست گربه در سبکترین فرمت woff2 خود، فقط ۴۱ کیلوبایت وزن دارد و در فرمت استاندارد woff فقط ۵۶ کیلوبایت. در کنار این‌ها، هر کدام از فایل‌های SVG معمولا بیشتر از ۱ کیلوبایت حجم ندارند.

میزبانی کردن

در صورتی که می‌خواهید آیکون فونت‌ها را بر روی سرور خود میزبانی کنید؛ محتویات پوشه‌‌ی Gorbeh را در محل مورد نظر مانند https://example.com/gorbeh قرار داده و این کد کوتاه را به فایل HTML خود اضافه کنید.

<!-- Gorbeh Icons -->
<link href="https://example.com/gorbeh/css/gorbeh-icons.css" rel="stylesheet">

استفاده از آیکون‌ها در HTML

استفاده کردن از آیکون‌های گربه در صفحه‌ی وب آسان است. به عنوان مثال:

<i class="gb gb_github"></i>

روش فوق را تمام مرورگرهای مدرن پشتیبانی می‌کنند و آیکون‌ها را به درستی نمایش می‌دهند.

برای مرورگرهایی که قابلیت رندر کردن آیکون‌ها را به کمک این روش ندارند، می‌توانید از رفرنس‌های عددی کارکترها استفاده کنید:

<i class="gb">&#xe0be;</i>

با کلیک کردن بر روی هر کدام از آیکون‌های موجود در لیست و باز کردن پنل آن، هم نام کلاس و هم رفرنس عددی کارکتر را پیدا خواهید نمود.

استایل دادن آیکون‌ها به کمک گربه

آیکون‌های گربه طراحی شده‌اند تا از قوانین متریال دیزاین پیروی کنند و زمانی که با رنگ‌ها و ابعاد توصیه شده استفاده شوند، بهترین ظاهر را خواهند داشت.

سایزبندی

با وجود آن که آیکون‌های گربه را می‌تواند به هر اندازه‌ای بزرگ یا کوچک کرد، اما طبق آنچه که در دستورالعمل متریال دیزاین برای آیکون‌ها بیان شده است، پیشنهاد می‌کنیم از آیکون‌ها در سایزهای ۱۸، ۲۴، ۳۶ یا ۴۸ پیکسلی استفاده کنید.

به صورت پیش‌فرض اما، اندازه‌ی قلم آیکون‌ها توسط المنتی که در آن استفاده شده است مشخص می‌شود.

آیکون‌ها زمانی که هم‌اندازه‌ی نوشته‌های متن هستند، بسیار خوب به نظر خواهند رسید؛ اما اگر مایلید که آن‌ها را در ابعاد استاندارد دیگر نمایش دهید، می‌توانید از کلاس‌های زیر استفاده کنید:

<i class="gb gb_github gb_s18"></i>

18px

<i class="gb gb_github gb_s24"></i>

24px

<i class="gb gb_github gb_s36"></i>

36px

<i class="gb gb_github gb_s48"></i>

48px

چرخش

گاها نیاز است تا برخی از آیکون‌ها را در جهات مختلفی چرخاند. در آیکون‌ست گربه به صورت پیش‌فرض امکان چرخاندن به اندازه‌های ۹۰، ۱۸۰ و ۲۷۰ درجه (ساعتگرد) وجود دارد:

<i class="gb gb_github gb_r90"></i>

۹۰°

<i class="gb gb_github gb_r180"></i>

۱۸۰°

<i class="gb gb_github gb_r270"></i>

۲۷۰°

آینه شدن

براساس دستورالعمل‌های متریال دیزاین برای دوسویه نوشتن و بخصوص برای زبان‌های راست به چپ مانند فارسی، لازم است بعضی از آیکون‌ها را آینه کرد تا مفهوم خود را با توجه به نوشته‌ها به درستی منتقل کنند. زمانی که جهت‌ها در آیکون معنی دارند، در زبان‌های راست به چپ باید آینه شوند.

<i class="gb gb_github gb_mirror"></i>

پویانمایی

گاها لازم است تا بر اساس نیازهای وبسایت و به منظور بیشتر تعاملی کردن آن، چرخیدن یک آیکون را پویانمایی کرد.

<i class="gb gb_github gb_animate_spin"></i>

رنگ‌ها

استفاده از آیکون‌فونت این باعث می‌شود تا بتوان به راحتی رنگ یک آیکون را تغییر داد. طبق دستورالعمل‌ متریال دیزاین برای رنگ‌ها، برای آیکون‌های فعال (اکتیو) پیشنهاد می‌کنیم تا از رنگ مشکی با شفافیت ۵۴٪ یا رنگ سفید با شفافیت ۱۰۰٪ زمانی که پس‌زمینه به ترتیب روشن یا تیره است، استفاده کنید. همچنین زمانی که آیکون‌ها غیرفعال (این‌اکتیو) هستند، از رنگ مشکی با شفافیت ۲۶٪ یا رنگ سفید با شفافیت ۳۰٪ زمانی که پس‌زمینه به ترتیب روشن یا تیره است، استفاده کنید.

به صورت پیش‌فرض اما، رنگ آیکون‌ها توسط المنتی که در آن استفاده شده است مشخص می‌شود.

مثال‌هایی از ترسیم یک آیکون بر روی پس‌زمینه‌ی روشن با رنگ تیره:

<i class="gb gb_github gb_dark"></i>

فعال

<i class="gb gb_github gb_dark gb_inactive"></i>

غیرفعال

مثال‌هایی از ترسیم یک آیکون بر روی پس‌زمینه‌ی تیره با رنگ روشن:

<i class="gb gb_github gb_light"></i>

فعال

<i class="gb gb_github gb_light gb_inactive"></i>

غیرفعال

برای آن که رنگ یک آیکون را به دلخواه عوض کنید، یک رول CSS تعریف کنید که رنگ متن را عوض کند:

.gb_github.github_red{color: #bd2c00}

و سپس از آن کلاس برای اشاره به آیکون استفاده کنید:

<i class="gb gb_github github_red"></i>


آیکون‌ایمیج برای وب

آیکون‌های گربه بغیر از فونت، به عنوان تصاویر معمولی و به فرمت SVG نیز موجود هستند.

SVG

آیکون‌های گربه به فرمت‌ SVG نیز که برای استفاده در وب بسیار مناسب است، قابل دسترسی هستند. SVGها در مخزن گیت آیکون‌های گربه و در فولد svg قرار گرفته‌اند.

در صورتی که از چندین آیکون به فرمت SVG در وبسایت خود استفاده می‌کنید، ساختن و استفاده کردن از یک spritesheet را به شما پیشنهاد می‌کنیم.