فونت آیکن ها - ادامه - Font-Awesome Material-Design-Icon

جلسه 17 دوره طراحی سایت - بخش دوم - مهدی یار منصوری - Mahdiar Mansouri سرفصل های ویدیو جلسه هفدهم : چگونه از آیکن ها در وبسایت خود استفاده کنیم؟ How To Use Icons In My Site مجموعه آیکن های رایج و پر کاربرد در سطح وب کدام اند؟ Font Awesome - Material Design Icon Which Font Icon Packages Are Common In Web Design? Font Awesome - Material Design Icon ... فایل Min چیست و چه کاربردی دارد؟ What Is .min File And It's Usage فایل map. چیست و چه کاربردی دارد؟ What Is .map File And It's Usages ====================================== توی این جلسه میخوایم راجع به مجموعه آیکن های مختلف مثل Font Awesome با هم صحبت کنیم، بعد از اضافه کردن فونت دلخواه که جلسه قبل یاد گرفتیم، توی این جلسه یاد میگیریم که فونت آیکن ها چی هستند و چطور میتونیم از اونها توی وبسایتمون استفاده کنیم، فونت آیکن ها مجموعه آیکن های مختلف و کاربردی هستن که طراحان اون ها رو به شکل "فونت" در آوردن تا هم مثل عکس حجیم نباشه و هم لود شدنش سرعت زیادی رو نگیره و همچنین مثل متن بتونیم رنگ و ویژگی های اونها رو بر حسب نیاز (مثلا روی هاور) تغییر بدیم، برای استفاده کردن از فونت آیکن ها باید یک مجموعه فونت آیکن رو انتخاب کنیم (مثل font-awesome یا bootstrap-icon یا material design icon) سپس فایل های اون مجموعه رو دانلود کنیم و فایل CSS ش رو به پروژه لینک کنیم (دقت کنید اگر از نسخه CSS آیکن ها استفاده میکنیم نباید آدرس و نسبت فایل و فولدری که بین CSS و فونت ها هست رو به هم بریزیم چون اونها هم داخل CSS خودشون از font-face استفاده میکنن و از طریق Src آدرس دهی انجام دادن تغییر فایل و فولدر ها میتونه باعث خراب شدن این آدرس و لود نشدن آیکن ها بشه) بعد از اضافه کردن فایل CSS مجموعه آیکن مون لازمه (یا به عبارتی بهتره) از یک تگ Inline مانند Span استفاده کنیم و از طریق اسم کلاس های اون مجموعه که توی لیست آیکن هاش در صفحه خود مجموعه آیکن منتشر شده میتونیم از ایکن ها استفاده کنیم، دقت کنید اکثر مجموعه آیکن ها یک کلاس مشترک رو هم برای تمام ایکن هاشون دارن مثلا نسخه های قدیمی تر font-awesome به این شکل هست که شما باید حتما ابتدا به Span خودتون یک کلاس fa بدین و بعد اسم ایکن مثلا fa-remove رو بهش به عنوان کلاس بدین پس کلاس های اسپن ما میشن fa fa-remove که این قاعده توی نسخه های جدید font-awesome مقداری متفاوت تر هست و توی ویدیو توضیح داده شده همچنین مجموعه آیکن Font Awesome به ما امکانات فوق العاده ای هم برای مدیریت ظاهر آیکن میده، مثلا میتونیم با کلاس های fa-1x ، fa-2x ..... fa-10x سایز آیکن مورد نظرمون رو از 1 تا 10 برابر کنیم یا مثلا میتونیم با استفاده از ویژگی data-fa-transform آیکن مورد نظرمون رو بزرگ کنیم، بچرخونیم، جابجا کنیم و... که توی ویدیو همراه با مثال کامل توضیح داده شده همچنین توی ویدیو این جلسه با مجموعه آیکن های Material Design Icon آشنا میشیم که مجموعه گسترده و متنوعی از آیکن ها هستند، Linear Icon که یک مجموعه آیکن از آیکن های Outline هست رو کامل میشناسیم و با یک سایت فوق العاده آشنا میشیم به اسم Flat-Icon که چند "میلیون" آیکن فوق العاده داره که میتونیم ازشون استفاده کنیم (((البته اشاره به این نکته خالی از لطف نیست که اخیرا پلن تجاری این سایت تغییر کرده و دیگه به ما Font-Icon به شکل رایگان نمیده، قبلا این سایت مانند ویدیو بود، تعدادی از آیکن ها پولی بودن تعدادی شون رایگان و آیکن های رایگان هم به شکل عکس، هم به شکل فایل لایه باز و هم به شکل وب آیکن ارائه میشدن، اما الان تمام آیکن ها رایگان شدن ولی فقط نسخه عکس اونها رایگان هست و برای سایر نسخه ها نیاز هست که اشتراک سایت خریداری بشه))) همچنین توی این جلسه با یک کتابخانه جمع و جور اما کاربردی CSS به اسم Hover-Master آشنا میشیم که مجموعه خوبی از افکت های Hover هست تا دیگه زمان ما صرف نوشتن افکت های ساده Hover نشه و در ضمن توی این جلسه مقداری هم راجع به برنامه مدیریت ورژن Git صحبت میکنیم و مقداری باهاش آشنا میشیم در کنار این مطالب یاد میگیریم که فایل های min. و map. چه فایل هایی هستند و چه کاربردی دارن، فایل min. فایلی هست که تمام Space ها و Enter های اون حذف شده و در یک خط نوشته شده، علت اینکار فشرده سازی و افزایش سرعت Rendering فایل هست و فایل های map. به ما کمک میکنن Source Code اون فایل رو ببینیم ( فایل قبل از کامپایل و تبدیل شدنش رو) امیدوارم از مشاهده این ویدیو استفاده برده باشید ارادتمند شما مهدیار منصوری