پس بیایید حالا یاد بگیریم چطور از آیکون‌ها
توی طراحیمون استفاده کنیم با استفاده از HTML و CSS.
پس همونطور که تازه یاد گرفتیم اولین کاری که باید انجام بدیم
وقتی می‌خوایم با آیکون‌ها کار کنیم
اینه که در واقع یه پکیج آیکون انتخاب کنیم.
حالا همونطور که گفتم،
خیلی خیلی پکیج آیکون رایگان در دسترس هست
و توی این پروژه ما قراره از این یکی‌های اینجا استفاده کنیم.
به اصطلاح heroicons، که توی heroicons.com در دسترسن.
و لینکش هم مثل همیشه
می‌تونید توی صفحه منابع من پیداش کنید.
حالا، همونطور که اینجا میگه، این یه پکیج آیکون SVG هست.
پس دقیقاً همونطور که من هم توی درس قبل اشاره کردم
SVG یه فرمتیه که می‌تونه بی‌نهایت مقیاس‌پذیر باشه.
و پس آیکون‌های SVG همیشه یه انتخاب خوبن.
پس می‌بینید که این پکیج شامل 230 آیکون هست
و هم آیکون‌ها با استایل خطی‌کشی داره
و بعد همون آیکون‌ها رو، ولی به استایل توپُر.
پس مثلاً اینجا، این آیکون یادداشت
اینجا وقتی فقط با خط‌ها باشه اینطوری به نظر میاد.
و اینجا هم نسخه توپُرشه.
و حتی با این یکی‌های اینجا راحت‌تر قابل مشاهده‌ست.
پس اگه مقایسه‌شون کنید، کاملاً واضحه
که اون توپُر کاملاً متفاوت
از اون خطی‌کشی به نظر میاد.
و این استایل‌های متفاوت جاهای متفاوتی
توی طراحی‌های مختلف دارن.
پس دقیقاً همونطور که توی درس قبل هم یاد گرفتیم.
حالا اگه این آیکون‌ها رو تحلیل کنیم
می‌بینیم که در واقع کاملاً گردن.
پس در حالی که تایپوگرافی که ما اینجا توی صفحمون داریم
در واقع یه ذره جعبه‌ای یا مربعیه.
پس واقعاً گرد نیست
ولی این آیکون‌ها برای استفاده کاملاً سادن.
و به همین دلیله
که من الان از اونها توی این پروژه استفاده می‌کنم.
پس بیشتر برای اهداف نمایشیه،
حتی اگه این آیکون‌ها شاید ایده‌آل‌ترین انتخاب
از لحاظ طراحی نباشن، ولی در واقع همونطور که خواهید دید
اونها هنوزم در واقع کاملاً خوب به نظر میان.
بسیار خب، حالا توی عمل،
چندین راه برای استفاده از آیکون‌های SVG توی HTML وجود داره.
یکیش اینه که فایل‌های SVG واقعی رو دانلود کنیم
و بعد اونها رو توی HTML
درست مثل عکس‌های معمولی بگنجونیم.
اما این یه سری محدودیت داره.
و پس ساده‌ترین راه
اینه که در واقع فقط کد SVG رو کپی کنیم،
و این کار می‌کنه چون در حالی که SVG در واقع فقط کده
پس در واقع یه مشخصات مشابه با HTML هست
ولی اساساً برای توصیف طراحی‌ها.
پس من نمی‌خوام وارد این بشم که SVG دقیقاً چیه.
ما فقط می‌خوایم اینجا ازش استفاده کنیم.
و پس اولین کاری که حالا می‌خوایم انجام بدیم
اینه که یه سری بلاک ویژگی اینجا بسازیم.
پس دقیقاً اینجا، پس یادتونه که گفتم
احتمالاً متداول‌ترین کاربرد برای آیکون‌ها
ساخت بلاک‌های ویژگیه.
پس جایی که یه آیکون مثل اینجا بالا داریم
بعد یه عنوان و بعد یه توضیحات.
و پس دقیقاً همین کاریه که الان می‌خوایم انجام بدیم.
پس این اولی اینجا درباره علمه.
پس بیایید دنبال یه آیکونی بگردیم که اساساً علم رو توصیف کنه.
و اینجا از این سمت، ما در واقع می‌تونیم علم رو جستجو کنیم.
و پس این یکی در واقع کاملاً قشنگ به نظر میاد.
پس بیایید اینجا روی کپی SVG کلیک کنیم.
بسیار خب، بعد توی HTML ما.
و حالا پنجره خیلی باریکه
ولی هنوزم فکر کنم می‌تونیم ببینیمش.
پس اینجا ما این کانتینر رو داریم
که grid three cols هست، که همه اینجا اینه.
و بعد سه تا div داریم
و هر کدومشون حالا یه ویژگین.
پس اینجا این عنوان رو داریم
و بعد توش متن واقعی رو داریم.
و پس بیایید اول آیکون رو بذاریم
قبل از این عنوان دقیقاً اینجا، paste کنیم.
و پس این همون چیزیه که کد SVG
برای اون آیکون خاص اینطوری به نظر میاد.
ذخیره‌اش کنیم، و اونجاست.
و البته، این کاملاً بزرگ‌تر از حد معموله.
و پس ما در واقع می‌تونیم حالا برویم
و این آیکون SVG رو با استفاده از CSS فرمت کنیم.
پس بیایید یه کلاس قشنگ بهش بدیم.
اون با این پیش‌فرض اینجا میاد، که واقعاً مفید نیست.
پس بیایید بهش feature icon بگیم.
و این کلاس باید دقیقاً اینجا داخل
المان SVG باشه.
پس دوباره، همونطور که اشاره کردم، SVG اساساً فقط یه راهه
برای توصیف کردن المان‌های گرافیکی مثل این آیکون اینجا.
پس SVG هنوزم یه المان توی HTML هست
و یه تگ باز و یه تگ بسته داره.
و داخلش توی این مورد یه المان path هست
که مثل همه این مختصات رو داره
که دقیقاً توصیف می‌کنه این آیکون باید چطوری به نظر برسه.
البته، ما هیچ‌وقت این رو دستی نمی‌نویسیم
پس ما فقط این آیکون رو از پکیج آیکونمون کپی کردیم.
عالیه، ولی به هر حال، بیایید حالا از این کلاس استفاده کنیم
که ما به این المان SVG اضافه کردیم،
درست مثل هر المان دیگه‌ای.
و پس حالا بیایید اینجا بریم به CSS مون.
بیایید اون رو اضافه کنیم، آره، اینجا نزدیک features.
اوه، و در واقع من قبلاً selector رو اینجا داشتم
پس این کمک‌کنندس.
و پس حالا بیایید با تعریف رنگ شروع کنیم.
و برای اون، ما از این ویژگی stroke استفاده می‌کنیم.
و بعد، یا color، حالا همینه،
ذخیره‌اش کردم و هیچ چیزی عوض نشد.
پس بیایید ببینیم چی اشتباهه.
پس features icon، شاید این رو اشتباه نوشتم.
اوه، آره، اینجا feature دارم
ولی می‌خواستم features icon صداش بزنم.
و حالا سبز شد.
قشنگه، ولی البته خیلی بزرگه.
حالا، اینجا در واقع توی توضیحات این آیکون‌ها
فوراً بهمون میگه که این طراحی شده که رندر بشه
توی 24 در 24 پیکسل حالا.
پس همونطور که در پایان درس قبل اشاره کردم
بعضی آیکون‌ها طراحی شدن که توی یه تنظیم کوچیک استفاده بشن
و این آیکون‌ها یکی از اونهان.
پس بیایید با استفاده از 24 در 24 شروع کنیم
و ما به سادگی این کار رو درست مثل هر المان دیگه‌ای انجام میدیم.
پس با width 24 پیکسل و height، همچنین 24 پیکسل.
بسیار خب، حالا این در واقع واقعاً واقعاً کوچیک به نظر میاد
و پس شاید بتونیم اون رو یه ذره بالاتر ببریم
به مثلاً 32 پیکسل.
و پس فکر کنم این هنوزم قشنگ به نظر میاد.
شبیه مثالی که توی درس قبل بهتون نشون دادم
نیست.
حالا اگه قرار بود از چیزی مثل 50 پیکسل استفاده کنیم
اونوقت اون جلوه رو می‌دیدیم
که یهو خط خیلی ضخیم میشه.
پس حالا دیگه اینجا خوب به نظر نمیاد
پس قطعاً باید کوچیک‌ترش کنیم.
ولی 32 فکر کنم هنوزم خوب به نظر میاد.
ما همچنین باید از یه ذره منطق استفاده کنیم
و مثلاً اینجا مقایسه‌اش کنیم
با عرض این کاراکترها.
و پس آره، برای من قابل قبول به نظر میاد.
بیایید فقط یه margin bottom هم اینجا اضافه کنیم
بیایید بگیم 16 پیکسل.
پس فعلاً اوکیه
ولی ما یه ذره بعدتر درباره سلسله‌مراتب بصری حرف می‌زنیم.
و بعد ما همه margin ها رو
پس همه فاصله‌گذاری‌ها رو توی کل صفحه تنظیم می‌کنیم.
حالا، ما همچنین می‌تونستیم از اون تکنیک استفاده کنیم
که این آیکون رو محصور می‌کردیم
توی یه نوع دایره با یه رنگ پس‌زمینه سبز.
ولی از اونجایی که این یه طراحی خیلی سادست،
فکر می‌کنم که،
این در واقع یه ذره شلوغی بصری زیادی اضافه می‌کرد
به این طراحی.
پس بیایید این کار رو نکنیم
و در عوض توی پروژه بزرگ بعدیمون انجامش بدیم.
ولی به هر حال، بیایید آیکون برای این یکی پیدا نکنیم
و برای این یکی اینجا هم همینطور.
و خب، همونطور که در پایان درس قبل هم اشاره کردم
این همیشه خیلی راحت نیست.
پس یه پکیج آیکون مثل این با فقط 230 آیکون
البته یه ذره محدوده و نمی‌تونه آیکون داشته باشه
برای هر موقعیتی که ما می‌خوایم.
پس من خیلی توی این پکیج آیکون اینجا جستجو کردم
و نمی‌خوام کلی وقت صرف کنم
الان برای بحث درباره گزینه‌های مختلف
من فقط اینجا برای راحتی
از یه آیکون به اسم happy استفاده می‌کنم.
پس این یکی الان، درسته؟
پس فکر کنم این یکی
هنوزم یه جورایی پیام راحتی رو منتقل می‌کنه.
و پس بیایید فقط از اون استفاده کنیم.
پس بیایید بریم اینجا به یکی بعدیمون دقیقاً اینجا.
و بعد کلاس باید features باشه،
خب، نه cion یا هرچی اون بود.
و آره، قشنگه.
و حالا این یکی اینجا، اخلاقی و پایدار.
پس اون مثل اینکه از یه قلب استفاده کنه
که چیزیه که خیلی از صفحات استفاده می‌کنن
برای این نوع پیام‌رسانی.
و با گذشت زمان با تجربه
شما البته بعد شروع می‌کنید به گرفتن یه حسی
از اینکه کدوم آیکون برای کدوم موقعیته.
پس درست مثل همه چیز دیگه
این واقعاً هم یه مسئله تجربه‌ست.
پس این باید قلب ما باشه.
و پس features icon و زیبا
واقعاً قشنگ به نظر میاد.
پس این آیکون‌های اینجا
اگه از من بپرسید تفاوت زیادی ایجاد می‌کنن.
واقعاً یه لمس قشنگیه.
و پس حالا وقتی کاربر به این بخش اینجا می‌رسه
این فقط کل محتوا رو
یه ذره راحت‌تر برای هضم کردن می‌کنه
و فقط راحت‌تر برای نگاه کردن هم.
عالیه، پس اینجا ما سه تا بلاک ویژگی با استفاده از آیکون ساختیم.
و حالا بیایید از یکی دیگه از کاربردهای بزرگ آیکون‌ها استفاده کنیم
که اینه که به سادگی کمک بصری به متن ارائه بدیم.
پس اینجا ما اینها رو داریم که بهشون میگیم، کارت‌ها.
پس اساساً یه کامپوننت که یه عکس داره
و توضیحات
و بعد یه سری مثل نقطه‌چین‌ها که می‌تونیم بگیم.
پس توضیحات کوتاه از ویژگی‌های محصولات.
و بعد اینجا پایین هم یه دکمه و یه قیمت.
پس این یه کارت معمولیه توی مثل یه فروشگاه
و خیلی هم متداوله که یه آیکون اضافه کنیم
به هر کدوم از این توضیحات متنی دقیقاً اینجا.
پس یکی که مثل تفریح رو توصیف می‌کنه،
یکی که توصیف می‌کنه برای چه مدتی راحته
بعد میگه که اونا از مواد وگان و ارگانیک استفاده می‌کنن
و در نهایت هم وزن.
پس بیایید سعی کنیم از یه آیکون برای هر کدوم از اینها استفاده کنیم
تا این محتوا رو یه ذره راحت‌تر برای هضم کردن کنیم
و راحت‌تر برای اسکن کردن هم.
پس دوباره، من قبلاً توی این آیکون‌ها جستجو کردم
و برای اولی، واقعاً یه مورد خیلی مناسب وجود نداره.
ولی دوباره، واقعاً می‌خواستم از این پکیج آیکون استفاده کنم
چون خیلی راحت برای استفاده‌ست.
و بنابراین اون تمرکز اصلی من بود
حتی اگه آیکون‌ها کامل نبودن.
پس اینجا من از این آیکون به اسم sparkles استفاده می‌کنم.
پس بیایید بریم پایین اینجا.
اینجاست قبلاً.
و پس اینجا هر کدوم از این خط‌ها اینجا داخل یه لیسته.
پس این لیست غیرترتیبی
و بعد هر کدومشون یه المان لیست هستن
ولی من از CSS استفاده کردم تا نقطه‌چین‌ها رو از این لیست حذف کنم.
به همین خاطره که نمی‌تونیم اونجا ببینیمشون.
پس داخل هر آیتم لیست، بیایید حالا آیکون رو paste کنیم.
و اونجاست قبلاً.
و پس این هم دلیلیه
که بعد ما این المان spin رو اینجا داریم
پس اساساً همه محتوا داخل یه المان هستن.
پس ما آیکون رو داخل یه SVG داریم.
و بعد در کنار اون
ما متن رو داخل یه المان span داریم
که یادتونه یه المان inline عمومیه
یه ذره شبیه divها برای المان‌های سطح بلاک.
بسیار خب، پس بیایید یه کلاس هم به این یکی‌ها اضافه کنیم.
و من به این یکی‌ها chair icon میگم.
اوکی، پس اون features icon هست.
و اینجا پایین، آره،
من قبلاً selector برای chair icon دارم.
پس بیایید دوباره با رنگ شروع کنیم.
و پس برای اون، یادتونه ما از ویژگی stroke استفاده می‌کنیم
و اون رو روی این رنگ تنظیم می‌کنیم.
حالا، اگه قرار بود از این آیکون‌های توپُر اینجا استفاده کنیم
اونوقت به جای استفاده از ویژگی stroke
شما در واقع به ویژگی fill نیاز داشتید.
بسیار خب، پس اونها دو گزینه متفاوتن
وقتی که می‌خواید رنگ یه آیکون SVG رو
استایل بدید و در واقع ما هنوزم می‌تونیم اون رو توی این آیکون اینجا امتحان کنیم.
پس بیایید فقط ببینیم چی میشه اگه fill رو تعریف کنیم
بیایید فقط قرمزش کنیم
و بعد آیکون یهو پُر میشه.
پس با رنگ قرمزمون.
ولی حالا بیایید سایز رو اینجا عوض کنیم.
و این یکی‌ها رو، بیایید در واقع 24 پیکسلشون کنیم.
پس اساساً همون سایزی که براش طراحی شدن.
و کاملاً قشنگ به نظر میاد.
و پس استایل‌های ما حالا تمومن.
تنها کاری که باید انجام بدیم پیدا کردن آیکون‌هاست
و نمایششون اونجا.
پس اینجا توی این یکی اینجا داریم به مشتری میگیم
صندلی برای چه مدت زمانی راحته.
پس به نظر میاد می‌خوایم یه ساعت اونجا نمایش بدیم.
بسیار خب، پس ساعت بعد سریع به کاربر میگه
که این یه چیزیه مرتبط با زمان.
بعد فقط باید کلاس chair icon رو اضافه کنیم.
بسیار خب، بعدی ما مثل این مواد وگان
و ارگانیک رو داریم، که اساساً یعنی
می‌خوایم به محیط زیست اهمیت بدیم.
پس برای اون می‌تونیم از این آیکون زمین استفاده کنیم.
آره، پس در واقع این یکی‌ست که بهش globe میگن.
پس بیایید اون رو کپی کنیم.
بهش chair icon میگیم.
قشنگه، عالیه.
و در نهایت اینجا می‌خوایم وزن یه جعبه رو داشته باشیم.
پس بیایید از یه چیزی استفاده کنیم که شبیه یه جعبه باشه.
پس box.
ولی این یکی اینجا
خب، یه جورایی واقعاً جذاب به نظر نمیاد.
واقعاً بیشتر شبیه یه آرشیو به نظر میاد
که اسم آیکون هم اینجا همینه.
پس بیایید cube رو امتحان کنیم.
و اون یکی خیلی بهتر به نظر میاد، پس SVG رو کپی می‌کنیم.
ولی البته متوجه شدم
چون قبلاً این رو از قبل طراحی کرده بودم.
پس اگه شما خودتون داشتید این رو طراحی می‌کردید
احتمالاً مجبور بودید از
کل این لیست آیکون‌ها عبور کنید
و بین همشون تصمیم بگیرید
که کدومشون طبق پیامتون بهترین تناسب رو داره.
ولی از اونجایی که اون وقت زیادی میگیره
من قبلاً اینجا از قبل انجامش دادم، البته.
پس chair icon.
و بفرما.
پس این اینجا خیلی بهتر از این یکی به نظر میاد.
بسیار خب، پس دوباره،
ما یه لمس کوچیک قشنگ اینجا اضافه کردیم هم از لحاظ بصری
و هم برای اینکه در واقع اسکن کردن محتوا رو راحت‌تر کنیم
همه اینها فقط با استفاده از چهار تا آیکون ساده.
پس واقعاً باحاله.
و پس حالا تنها کاری که باید انجام بدیم کپی کردن اینهاست به این کارت
و به این یکی اینجا هم همینطور.
پس بذارید حالا در واقع یه ترفند خیلی قشنگ بهتون نشون بدم
که می‌تونیم توی VS code استفاده کنیم
که اینه که از چندین کِرسر استفاده کنیم.
و من می‌خوام با انجام این کار توی یه مثال خیلی کوچیک شروع کنم.
پس بیایید بگیم می‌خواستم دو تا کلمه مختلف رو انتخاب کنم.
پس بیایید بگیم این یکی، block quote.
و حالا روی صفحه کلیدم، می‌تونم کلید Alt رو بزنم
یا Option روی مک، و می‌تونم یه کلمه دیگه انتخاب کنم.
بیایید بگیم مثل این.
و پس الان می‌بینید
که ما دو تا کِرسر چشمک‌زن اینجا داریم.
و حالا می‌تونم این رو کپی کنم.
پس فقط کپی کردم.
و بیایید بگیم می‌خواستم این دوتا رو یه جایی paste کنم.
پس شاید در واقع فقط اینجا
یا در واقع اون خیلی منطقی نیست.
پس خب، بیایید بگیم فقط اینجا و شاید اینجا.
و پس برای اضافه کردن حالا یه کِرسر دیگه
می‌تونم دوباره کلید Option یا کلید Alt رو بزنم.
پس درست مثل این.
و پس حالا دوباره، دو تا کِرسر دارم.
و پس اگه حالا چیزی که قبلاً انتخاب کردم رو paste کنم
اونوقت این دو تا کلمه دقیقاً
جایی که این دو تا کِرسر داشتیم ظاهر میشن.
و من در واقع حالا می‌تونم کارهایی انجام بدم
با این دو تا کِرسر همزمان.
پس می‌تونم یه فاصله اینجا اضافه کنم و می‌تونم دور متن حرکت کنم
و همه چیز رو توی چندین جا انجام بدم.
پس این خیلی مفید خواهد بود برای کپی کردن این آیکون‌های اینجا
نه یکی یکی، بلکه همشون یکجا.
پس بیایید همشون رو انتخاب کنیم.
پس اولی اینه
و تا آخر SVG.
پس اون اولیه.
و حالا دوباره، من کلید Alt یا Option رو می‌زنم
قبل از اینکه دوباره اینجا کلیک کنم و همه این رو انتخاب کنم.
پس می‌بینید که حالا ما این یکی رو انتخاب کردیم و این یکی رو
و حالا بیایید دوباره انجامش بدیم.
و فراموش نکنید که کلید Alt یا Option رو بزنید
قبل از کلیک کردن اینجا.
در غیر این صورت انتخاب‌های دیگتون رو از دست میدید.
اوکی، پس سه تا و دوباره.
پس 1، 2، 3، 4 انتخاب، و حالا کپی‌اش کنیم.
و حالا اینجا پایین، فقط باید بریم به جاهایی
که می‌خوایم آیکون‌ها باشن.
پس اینجاست و حالا دوباره، alt و اینجا و اینجا.
و پس حالا paste کنیم و ذخیره کنیم.
و اونجاست.
پس یه راه خیلی ساده برای کپی کردن همه چیز همزمان
که وقت زیادی رو برامون ذخیره می‌کنه.
و پس حالا می‌تونیم فقط دوباره دقیقاً اینجا انجامش بدیم.
پس اینجا و اینجا، و اینجا، و اینجا.
Paste کنیم، ذخیره کنیم، و بفرما.
حالا، اگه نتونستید اینطوری انجامش بدید
البته می‌تونید یکی یکی به صورت جداگانه هم کپی‌شون کنید.
ولی این یه ترفندیه که من همیشه استفاده می‌کنم
وقتی دارم از VS code استفاده می‌کنم.
و پس اینطوریه که شما از آیکون‌ها توی طراحی‌هاتون استفاده می‌کنید
با رعایت قوانینی که قبلاً توضیح دادم.
پس ما از یه پکیج آیکون قشنگ با آیکون‌های SVG استفاده کردیم.
ما ازشون توی دو موقعیت مختلف استفاده کردیم
برای ساخت بلاک‌های ویژگی
و برای ارائه کمک بصری به متن اینجا پایین.
ما آیکون‌ها رو خیلی بزرگ نکردیم
و همچنین سعی کردیم آیکون‌هایی رو انتخاب کنیم که واقعاً منطقی باشن
که توی بیشتر موارد فکر کنم در واقع موفق شدیم بهش برسیم.
عالیه.
پس با این کار
شما یکی دیگه از اجزای خیلی مهم
طراحی وب عالی رو تسلط پیدا کردید.
و پس حالا بیایید با هم بریم سراغ یکی بعدی،
که سایه‌هاست.
پس خیلی زود اونجا می‌بینمتون.