اضافه کردن آیکون جدید به قالب پاندا و ترنسفرمر

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

توجه

راهنمای ویدیویی مخصوص نسخه‌های قدیمی است. در صورت استفاده از پاندا 2.6.1+ و ترنسفرمر 4.5.1+، طبق راهنمای متنی زیر عمل کنید.

قالب پاندا 2.6.1+ و ترنسفرمر 4.5.1+

از نسخه 2.6.1 پاندا و 4.5.1 ترنسفرمر، فونت‌های قالب از Fontello به FlutterIcon تغییر کردند. دلیل این تغییر تنوع آیکون‌های بیشتر در فلاترآیکون بود، البته اسم فونت همچنان فونتلو است تا تداخلی پیش نیاید. ماژول ایزی بیلدر از فونت آیکون قالب استفاده می‌کند، پس اگر فونت جدیدی به قالب اضافه کنید، در ایزی بیلدر هم می‌توانید از آن استفاده کنید.

• اگر از چایلد تم استفاده می‌کنید، این تغییرات را روی قالب مادر انجام دهید.
• فایل config.json از مسیر themes/yourtheme/font-fontello را در پکیج نصب قالب پیدا کنید.
• این فایل را در سایت fluttericon.com آپلود کنید.
• به صورت پیش‌فرض بالای 600 آیکون انتخاب شده‌اند. سعی کنید آیکون‌های فعلی را حذف نکنید. صرفا آیکون‌های جدید را انتخاب کنید. اگر قصد استفاده از آیکون‌های دلخواه دارید آن‌ها را با فرمت svg در بخش “Custom icon” آپلود کنید.
• پکیج جدید را دانلود و اکسترکت کنید.
• فایل config.json جدید را جایگیزین فایل قدیمی در مسیر themes/yourtheme/font-fontello کنید.
• فایل با فرمت .ttf را به fontello.woff و fontello.woff2 تبدیل کنید. برای تبدیل فرمت فونت می‌توانید از این ابزار رایگان استفاده کنید. (به کوچک و بزرگ بودن حروف دقت کنید و F را به f ویرایش کنید.)
• پس از تبدیل، فایل‌ها را در پوشه themes/yourtheme/font-fontello/font آپلود کنید تا جایگزین فایل‌های قدیمی شوند.
• وارد این لینک شوید. در فیلد Your site domain آدرس دامنه خود را بدون https و اسلش بنویسید. مثلا fasleaval.com
• در فیلد Your theme name اسم قالب را بنویسید. مثلا panda یا transformer
• فایل config.json را با یک ادیتور (مثلا نوت پد) باز کنید و محتویات آن را کپی و در فیلد نهایی وارد کنید.
• در نهایت روی Submit کلیک کنید. خروجی این ابزار یک فایل زیپ است که شامل fontello.js ،fontello.css و icons.scss است. این فایل‌ها را در پوشه themes/yourtheme/font-fontello آپلود کنید.
• علاوه بر فایل زیپ، یک کد css نیز به شما نمایش داده می‌شود. کد را با زدن دکمه copy، کپی کنید. وارد ماژول ویرایشگر قالب شوید و کدی که کپی کردید را در تب کدهای دلخواه به باکس اول (CSS) اضافه کنید. اگر از ماژول ایزی بیلدر استفاده می‌کنید این کد را در تب کدهای دلخواه پنل ادیتور اضافه کنید.
• اگر همه چیز به درستی پیش رفت، از پوشه themes/yourtheme/font-fontello یک بک آپ تهیه کنید و هر بار که قالب را ارتقا می‌دهید، این پوشه را جایگزین پوشه قدیمی کنید.

نسخه‌های قبل از پاندا 2.6.0 و ترنسفرمر4.5.0

1. فایل themes/yourtheme/font-fontello/config.json را دانلود کنید. این فایل حاوی اطلاعات تمام آیکون‌های پیش‌فرض است.
2. وارد سایت fontello.com شوید و فایل config.json که دانلود کردید را Import کنید.
3. بعد از وارد کردن، بیش از 400 آیکون به صورت انتخاب شده را مشاهده خواهید کرد.
4. روی آیکونی که میخواهید اضافه کنید کلیک کنید، لازم است که اسم آیکونی که اضافه کردید را بدانید، موس را روی آیکون هاور کنید تا اسم آن نمایش داده شود. این اسم(ها) را یادداشت کنید که در مراحل بعدی به آن نیاز دارید.
5. اگر شما آیکون svg. خودتان را دارید یا فایل svg را از سایتی دانلود کردید، آن را هم میتوانید اضافه کنید، برای این کار فایل آیکون را در بخش “Custom icon” با موس درگ کنید (فایل را بکشید و در بخش مربوطه رها کنید).
6. فایل فشرده جدید را دانلود کنید و آن را unzip کنید.
7. فایل جدید config.json و فایل های آیکون را در مسیر themes/yourtheme/font-fontello/ آپلود کنید تا جایگزین فایل های قدیمی شوند.
8. فایل fontello-codes.css را پیدا کنید و نام آن را به icons.scss تغییر دهید و سپس آن را در مسیر themes/yourtheme/font-fontello/ آپلود و جایگزین فایل قدیمی کنید.
9. کدهای CSS آیکون های جدیدی که اضافه کردید را با استفاده از نامشان پیدا کنید و کدهای آن را به بخش «کدهای دلخواه css» در ماژول «ویرایشگر قالب» اضافه کنید.
10. همچنین کد css زیر را به کدهای دلخواه css ویرایشگر قالب اضافه کنید. قبل از اضافه کردن، تمام ” yourdomain” و “yourtheme” ها را در کد زیر اصلاح کنید و آن را به دامنه سایت خودتان و نام قالب تغییر دهید. همچنین میتوانید کد 0105 در انتهای آدرس فایل را تغییر دهید تا فایل های فونت مجدد بارگیری شوند تا از مشکلات کش جلوگیری کنید.

@font-face {
font-family: 'fontello';
src: url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.eot?0105');
src: url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.eot?0105#iefix') format('embedded-opentype'),
url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.woff2?0105') format('woff2'),
url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.woff?0105') format('woff'),
url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.ttf?0105') format('truetype'),
url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.svg?0105#fontello') format('svg');
font-weight: normal;
font-style: normal;
}

11. تمام شد! موفق باشید

قالب پاندا 1 و ترنسفرمر 3

افزودن آیکون در پاندا 1 و ترنسفرمر 3 تفاوت زیادی با ویدیو و توضیحات مخصوص پاندا 2 / ترنسفرمر 4 ندارد. فقط نام پوشه‌ها متفاوت است. ویدیوی انگلیسی مخصوص این نسخه را می‌توانید از این‌جا مشاهده کنید.

تنها تفاوت در این نسخه، افزودن کد به بخش مدیریت است. برای نمایش آیکون‌های جدید در بک آفیس، نیاز است کد آیکون‌های جدید را به فایل themes/panda/sass/font-fontello/_icons.scss اضافه کنید.

ماژول پرداخت آسان

1. فایل config.json را از مسیر
   modules/steasycheckout/views/font/
   دانلود کنید. این فایل حاوی اطلاعات تمام آیکون‌های پیش‌فرض است.
2. وارد سایت fontello.com شوید و فایل config.json که دانلود کردید را Import کنید.
3. بعد از وارد کردن، بیش از 50 آیکون به صورت انتخاب شده را مشاهده خواهید کرد.
4. روی آیکونی که میخواهید اضافه کنید کلیک کنید.
5. اگر شما آیکون svg. خودتان را دارید یا فایل svg را از سایتی دانلود کردید، آن را هم میتوانید اضافه کنید، برای این کار فایل آیکون را در بخش “Custom icon” با موس درگ کنید (فایل را بکشید و در بخش مربوطه رها کنید).
6. فایل فشرده جدید را دانلود کنید و آن را unzip کنید.
7. فایل‌های config.json و fontello-codes.css و fontello.eot و fontello.svg و fontello.ttf و fontello.woff و fontello.woff2 را پیدا کنید و آن ها را با فایل‌های قدیمی در پوشه modules/steasycheckout/views/font/ جایگزین کنید.
8. ممکن است برای نمایش صحیح تمام آیکون‌ها نیاز داشته باشید تا کش اسمارتی و کش مرورگر را خالی کنید.
9. تمام شد! موفق باشید.