برای نصب Font Awesome با استفاده از npm، می‌توانید مراحل زیر را دنبال کنید:
▎1. نصب npm
مطمئن شوید که Node.js و npm بر روی سیستم شما نصب شده‌اند. اگر Node.js را نصب کرده‌اید، npm به‌طور خودکار نصب می‌شود.
▎2. ایجاد پروژه جدید (اختیاری)
اگر هنوز یک پروژه جدید ندارید، می‌توانید با استفاده از دستورات زیر یک پروژه جدید ایجاد کنید:
▎3. نصب Font Awesome
برای نصب Font Awesome، دستور زیر را در ترمینال اجرا کنید:
▎4. استفاده از Font Awesome در پروژه
پس از نصب، شما باید فایل‌های CSS و JS مربوط به Font Awesome را در پروژه خود وارد کنید. برای این کار، می‌توانید به فایل CSS خود (مثلاً style.css) و یا به HTML خود (مثلاً index.html) لینک دهید.
▎روش اول: استفاده در HTML
در فایل HTML خود، قبل از تگ </head>، لینک CSS و JS را اضافه کنید:
▎روش دوم: استفاده در CSS
اگر می‌خواهید از Font Awesome در CSS استفاده کنید، می‌توانید به صورت زیر عمل کنید:
▎5. استفاده از آیکون‌ها
حالا شما می‌توانید از آیکون‌های Font Awesome در HTML خود استفاده کنید. به عنوان مثال:
با دنبال کردن این مراحل، شما می‌توانید Font Awesome را به پروژه خود اضافه کرده و از آن استفاده کنید.
▎1. نصب npm
مطمئن شوید که Node.js و npm بر روی سیستم شما نصب شده‌اند. اگر Node.js را نصب کرده‌اید، npm به‌طور خودکار نصب می‌شود.
▎2. ایجاد پروژه جدید (اختیاری)
اگر هنوز یک پروژه جدید ندارید، می‌توانید با استفاده از دستورات زیر یک پروژه جدید ایجاد کنید:
mkdir my-project
cd my-project
npm init -y
▎3. نصب Font Awesome
برای نصب Font Awesome، دستور زیر را در ترمینال اجرا کنید:
npm install --save @fortawesome/fontawesome-free
▎4. استفاده از Font Awesome در پروژه
پس از نصب، شما باید فایل‌های CSS و JS مربوط به Font Awesome را در پروژه خود وارد کنید. برای این کار، می‌توانید به فایل CSS خود (مثلاً style.css) و یا به HTML خود (مثلاً index.html) لینک دهید.
▎روش اول: استفاده در HTML
در فایل HTML خود، قبل از تگ </head>، لینک CSS و JS را اضافه کنید:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<title>Font Awesome Example</title>
</head>
<body>
<h1>مثال آیکون Font Awesome</h1>
<i class="fas fa-camera"></i> <!-- آیکون دوربین -->
</body>
</html>
▎روش دوم: استفاده در CSS
اگر می‌خواهید از Font Awesome در CSS استفاده کنید، می‌توانید به صورت زیر عمل کنید:
@import '~@fortawesome/fontawesome-free/css/all.min.css';
▎5. استفاده از آیکون‌ها
حالا شما می‌توانید از آیکون‌های Font Awesome در HTML خود استفاده کنید. به عنوان مثال:
<i class="fas fa-user"></i> <!-- آیکون کاربر -->
<i class="fab fa-github"></i> <!-- آیکون گیت‌هاب -->
با دنبال کردن این مراحل، شما می‌توانید Font Awesome را به پروژه خود اضافه کرده و از آن استفاده کنید.
❤4
یه توصیه برادرانه
توی سال 2026 باید سخت کار کرد دوستان و غیر از این باخت منتظره
توی سال 2026 باید سخت کار کرد دوستان و غیر از این باخت منتظره
زندگی
🔥6🤝6🤷♂2
✨ انیمیشن ورود المنت‌ها فقط با CSS
یادته وقتی یه کارت یا مودال رو با JS به صفحه اضافه می‌کردی، انیمیشن ورودش کار نمی‌کرد؟ 😅
دلیلش این بود که مرورگر برای المنتی که تازه ساخته شده «حالت قبلی» نداشت تا ازش انیمیت کنه.
@starting-style
دقیقاً همین حالت اولیه رو بهش می‌ده:
یعنی المنت موقع اولین رندر از حالت داخل @starting-style شروع میکنه و نرم به استایل اصلی می‌رسه. روی dialog و popover هم عالی جواب می‌ده 👌
💡 نکته مهم:
برای انیمیشنِ خروج (مثلاً رسیدن به display: none) باید transition-behavior: allow-discrete هم اضافه کنی. مرورگرهای مدرن پشتیبانی می‌کنن، ولی قبل از استفاده توی پروژه اصلی، Can I Use رو چک کن.
📤 برای دوستی که هنوز انیمیشن ورود رو با JS می‌نویسه فوروارد کن!
@awat_dev
یادته وقتی یه کارت یا مودال رو با JS به صفحه اضافه می‌کردی، انیمیشن ورودش کار نمی‌کرد؟ 😅
دلیلش این بود که مرورگر برای المنتی که تازه ساخته شده «حالت قبلی» نداشت تا ازش انیمیت کنه.
@starting-style
دقیقاً همین حالت اولیه رو بهش می‌ده:
.card {
opacity: 1;
transform: none;
transition: opacity .4s, transform .4s;
@starting-style {
opacity: 0;
transform: translateY(20px);
}
}یعنی المنت موقع اولین رندر از حالت داخل @starting-style شروع میکنه و نرم به استایل اصلی می‌رسه. روی dialog و popover هم عالی جواب می‌ده 👌
💡 نکته مهم:
برای انیمیشنِ خروج (مثلاً رسیدن به display: none) باید transition-behavior: allow-discrete هم اضافه کنی. مرورگرهای مدرن پشتیبانی می‌کنن، ولی قبل از استفاده توی پروژه اصلی، Can I Use رو چک کن.
📤 برای دوستی که هنوز انیمیشن ورود رو با JS می‌نویسه فوروارد کن!
@awat_dev
❤6
معرفی کتابخانه AOS
کتابخانه AOS (Animate On Scroll) برای ساخت انیمیشن هنگام اسکرول در صفحات وب استفاده میشه.
با چند خط کد می‌تونی المان‌های سایت رو هنگام اسکرول با افکت‌های جذابی مثل "fade"، "zoom" و "slide" نمایش بدی.
نحوه استفاده:
و در JavaScript:
ساده، سبک و کاربردی برای جذاب‌تر کردن رابط کاربری سایت.
@awat_dev
کتابخانه AOS (Animate On Scroll) برای ساخت انیمیشن هنگام اسکرول در صفحات وب استفاده میشه.
با چند خط کد می‌تونی المان‌های سایت رو هنگام اسکرول با افکت‌های جذابی مثل "fade"، "zoom" و "slide" نمایش بدی.
نحوه استفاده:
<div data-aos="fade-up">
Hello World
</div>
و در JavaScript:
AOS.init();
ساده، سبک و کاربردی برای جذاب‌تر کردن رابط کاربری سایت.
@awat_dev
🔥4💯4❤2
دوستانی که با sass کار میکنید.
دیگه لازم نیست دستی خودتون بیاید rem رو محاسبه کنید و بنویسید.
یک فانکشن تعریف میکنید و پیکسل رو به rem تبدیل میکنه.
یعنی شما براساس همون پیکسل کارکنید مشکلی نیست چون این تابع به rem تبدیلش میکنه
ورودی رو بر اساس پیکسل میدی و اون خروجی رو با rem اعمال میکنه
@awat_dev
دیگه لازم نیست دستی خودتون بیاید rem رو محاسبه کنید و بنویسید.
یک فانکشن تعریف میکنید و پیکسل رو به rem تبدیل میکنه.
یعنی شما براساس همون پیکسل کارکنید مشکلی نیست چون این تابع به rem تبدیلش میکنه
ورودی رو بر اساس پیکسل میدی و اون خروجی رو با rem اعمال میکنه
@awat_dev
❤7
پروژه جدید از نوع پنل مدیریت به زودی همراه سورس کد کامل آپلود میشه دوستان🩵
🔥6❤2
</awat>
رفقا این نمونه فرم log in برای تمرین html CSS خیلی مناسبه @awat_dev
دوستان گل به زودی سورس کد این فرم رو براتون ارسال میکنم
❤5
دوستان شرکت گوگل مارو تحریم کرده و از این به بعد حتی واسه ساخت اکانت جی‌میل با مکافات ربروییم💔
راست و دروغش هنوز کامل مشخص نشده
راست و دروغش هنوز کامل مشخص نشده
خبری
❤7🗿4
سلام، خسته نباشید 🌱
یه نکته‌ی کوچیک راجع به Tailwind CSS می‌خواستم بگم که شاید به کارتون بیاد.
توی طراحی معمولاً برای هر سکشن یا بخشی که می‌خوایم پیاده‌سازی کنیم، یه Width، Height و... مشخص شده که معمولاً بر اساس Pixel هست.
حالا برای تبدیل این مقدارها به مقادیر Tailwind، معمولاً می‌تونیم از مقادیر موجود توی داکیومنت خود Tailwind استفاده کنیم؛ ولی خب بعضی وقتا ممکنه داکیومنت برامون باز نشه، بهش دسترسی نداشته باشیم یا اصلاً حوصله‌ی باز کردنش رو نداشته باشیم 😄
اینجا یه راه خیلی ساده داریم 👇
مثلاً فرض کنید عرض سکشن ما 250px هست و می‌خوایم مقدار مناسبش رو برای Tailwind پیدا کنیم.
کافیه 250 رو تقسیم بر 4 کنیم:
250 ÷ 4 = 62.5
پس مقدار Tailwind ما میشه:
w-62.5
البته بسته به نیازتون میتونید مقدار رو گرد کنید و از "w-62" یا مقدار دقیق‌تر استفاده کنید.
🔸 دلیلش هم اینه که مقیاس پیش‌فرض Tailwind معمولاً بر اساس هر واحد = 0.25rem هست که در تنظیمات پیش‌فرض، معادل 4px در نظر گرفته میشه.
پس به‌صورت خلاصه:
Pixel ÷ 4 = مقدار Tailwind
مثلاً:
100px → 25
200px → 50
250px → 62.5
400px → 100
یه ترفند ساده‌ست، ولی وقتی زیاد با Tailwind کار کنید، خیلی به دردتون می‌خوره. 🚀
یه نکته‌ی کوچیک راجع به Tailwind CSS می‌خواستم بگم که شاید به کارتون بیاد.
توی طراحی معمولاً برای هر سکشن یا بخشی که می‌خوایم پیاده‌سازی کنیم، یه Width، Height و... مشخص شده که معمولاً بر اساس Pixel هست.
حالا برای تبدیل این مقدارها به مقادیر Tailwind، معمولاً می‌تونیم از مقادیر موجود توی داکیومنت خود Tailwind استفاده کنیم؛ ولی خب بعضی وقتا ممکنه داکیومنت برامون باز نشه، بهش دسترسی نداشته باشیم یا اصلاً حوصله‌ی باز کردنش رو نداشته باشیم 😄
اینجا یه راه خیلی ساده داریم 👇
مثلاً فرض کنید عرض سکشن ما 250px هست و می‌خوایم مقدار مناسبش رو برای Tailwind پیدا کنیم.
کافیه 250 رو تقسیم بر 4 کنیم:
250 ÷ 4 = 62.5
پس مقدار Tailwind ما میشه:
w-62.5
البته بسته به نیازتون میتونید مقدار رو گرد کنید و از "w-62" یا مقدار دقیق‌تر استفاده کنید.
🔸 دلیلش هم اینه که مقیاس پیش‌فرض Tailwind معمولاً بر اساس هر واحد = 0.25rem هست که در تنظیمات پیش‌فرض، معادل 4px در نظر گرفته میشه.
پس به‌صورت خلاصه:
Pixel ÷ 4 = مقدار Tailwind
مثلاً:
100px → 25
200px → 50
250px → 62.5
400px → 100
یه ترفند ساده‌ست، ولی وقتی زیاد با Tailwind کار کنید، خیلی به دردتون می‌خوره. 🚀
❤12
تیلویند یا بوت‌استرپ؟
یکی از انتخاب‌های همیشگی در شروع پروژه‌های فرانت‌اند 👇
پس کدوم رو انتخاب کنیم؟
اگر سرعت و کامپوننت‌های آماده برات مهم‌تره بوت استرپ واسه توعه.
اگر آزادی طراحی و ساخت UI اختصاصی می‌خوای تیلویند انتخاب توعه.
در نهایت، هیچ‌کدوم برای همه پروژه‌ها «بهتر» نیست؛ انتخاب درست به نیاز پروژه بستگی داره.
یکی از انتخاب‌های همیشگی در شروع پروژه‌های فرانت‌اند 👇
Bootstrapــــ
• کامپوننت‌های آماده
• شروع سریع‌تر
• مناسب پنل‌ها و رابط‌های استاندارد
• یادگیری اولیه ساده‌تر
Tailwind CSS
• آزادی بیشتر در طراحی
• مبتنی بر کلاس‌های Utility
• مناسب طراحی‌های اختصاصی
• کنترل بیشتر روی ظاهر کامپوننت‌ها
پس کدوم رو انتخاب کنیم؟
اگر سرعت و کامپوننت‌های آماده برات مهم‌تره بوت استرپ واسه توعه.
اگر آزادی طراحی و ساخت UI اختصاصی می‌خوای تیلویند انتخاب توعه.
در نهایت، هیچ‌کدوم برای همه پروژه‌ها «بهتر» نیست؛ انتخاب درست به نیاز پروژه بستگی داره.
❤6🔥3👏1
</awat>
از دلِ نومیدی، امیدها بجوشد مولانا
ای آنکه طبیب دردِ مایی
این درد زِ حد رفت چه می‌فرمایی؟!
بزرگداشت مولانای ایران گرامی باد
این درد زِ حد رفت چه می‌فرمایی؟!
مولانا
بزرگداشت مولانای ایران گرامی باد
❤6🔥3✍2
🚀 ۴ سایت برای دموهای آماده JavaScript
اگر برای پروژه‌های فرانت‌اند دنبال ایده و نمونه‌کد آماده هستید، این ۴ سایت را ببینید:
🌐 https://codepen.io/
🌐 https://jsfiddle.net/
🌐 https://tympanus.net/codrops/
🌐 https://threejs.org/examples/
@awat_dev
اگر برای پروژه‌های فرانت‌اند دنبال ایده و نمونه‌کد آماده هستید، این ۴ سایت را ببینید:
🔹 CodePen
دموهای متنوع HTML، CSS و JavaScript
🌐 https://codepen.io/
🔹 JSFiddle
تست و اجرای سریع کدهای JavaScript
🌐 https://jsfiddle.net/
🔹 Codrops
انیمیشن‌ها و افکت‌های حرفه‌ای برای وب
🌐 https://tympanus.net/codrops/
🔹 Three.js Examples
دموهای جذاب سه‌بعدی و WebGL
🌐 https://threejs.org/examples/
@awat_dev
❤8🔥1