ماهو Font Awesome
لنتعرف في البداية عنها .. Font Awesome هي مكتبة أيقونات متجهة (vector icons) يتم استخدامها في تطوير وتصميم مواقع الويب والتطبيقات.
توفر مجموعة ضخمة من الأيقونات التي يمكن تخصيصها بسهولة من حيث الحجم ، اللون ، الظل ، والمحاذاة تماماً كما يتم التعامل مع النصوص ، لأنها مبنية على الخطوط (fonts) وليس الصور.
تاريخ اطلاقها
تم إنشاءها بواسطة Dave Gandy عام 2012 وكانت في البداية مخصصة لإطار العمل Bootstrap لتوفير أيقونات جاهزة ومتناسقة معه ، ثم توسعت في عام 2013 لتشمل الكثير من الايقونات
مميزاتها
- مجانية وسهلة الاستخدام
- متوافقة مع جميع المتصفحات
- تدعم التخصيص الكامل عبر CSS
- يمكن استخدامها كـ SVG أو web font
انماط Font Awesome
يتكون من عدة انماط منها
- fas = الصلب Solid ايقونات صلبة وممتلئة (مثلاً fas fa-star نجمة ممتلئة)
- far = خفيف Regular ايقونات خفيفة وفارغة (مثلاً far fa-star نجمة فارغة)
- fab = العلامة التجارية Brands ايقونات للعلامات التجارية مثل تويتر ، قوقل ، فيسبوك …الخ (مثلاً fab fa-twitter شعار تويتر)
بعض الايقونات مثل النجمة يمكن جعلها معبئة باستخدام fas أو مفرغة باستخدام far وينطبق الامر على عدد من الايقونات وليس جميعها مثل envelope
طريقة الاستخدام
اضافة الكود التالي بين الوسم <head> و <head/> في ملف html
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/> |
استخدم هذا الموقع للحصول على آخر الاصدارات من الكود أو اختيار الاصدار المناسب لك.
بعد ذلك يمكن استخدام مكتبة الايقونات في أي مكان تريده في html على سبيل المثال لا الحصر :
|
1 2 3 4 |
<i class="fas fa-user"></i> ايقونة مستخدم <i class="fas fa-home"></i> ايقونة منزل <i class="fas fa-heart"></i> ايقونة قلب <i class="fa-solid fa-heart"></i> ايقونة قلب - تم استخدام solid بدلاً من s |
تخصيص الايقونات بواسطة CSS
يمكن تنسيقها من حيث الحجم واللون والهوامش باستخدام CSS بشكل مباشر على نفس الايقونة مثال :
|
1 |
<i class="fas fa-home" style="color: gold; font-size: 40px;"></i> |
أو باستخدام ملف خاص CSS خارجي باضافة التنسيق إلى ملف style.css مثال :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*تخصيص الايقونة */ .icon{ font-size: 50px; color: #007bff; margin: 10px; } } /* تأثير عند المرور بالفأرة */ .cc:hover { transform: scale(1.3); color: #ff5722; } /* ألوان مختلفة */ .red { color: #e74c3c; } .blue { color: #3498db; } .green { color: #2ecc71; } .gold { color: gold; } |
ثم استخدام التنسيق في ملف html كما يلي :
|
1 2 3 4 |
<i class="fas fa-home icon blue"></i> <i class="fas fa-user icon green"></i> <i class="fas fa-heart icon red"></i> <i class="far fa-star icon gold"></i> |
مثال تجريبي
جرب الكود التالي بصيغة html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>تجربة Font Awesome </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> <style> body { font-family: 'Calibri', sans-serif; text-align: center; margin-top: 50px; background-color: #f5f5f5; } h1 { color: #333; margin-bottom: 30px; } .icon { font-size: 50px; margin: 20px; transition: transform 0.3s, color 0.3s; cursor: pointer; } /* تأثير عند المرور بالفأرة */ .icon:hover { transform: scale(1.3); color: #ff5722; } /* ألوان مختلفة */ .red { color: #e74c3c; } .blue { color: #3498db; } .green { color: #2ecc71; } .gold { color: gold; } .footer { font-size: 11px; margin-top: 50px; } </style> </head> <body> <h1>تجربة أيقونات Font Awesome</h1> <i class="fas fa-home icon blue"></i> <i class="fas fa-user icon green"></i> <i class="fas fa-heart icon red"></i> <i class="fas fa-star icon gold"></i> <i class="far fa-star icon gold"></i> <i class="fas fa-car icon blue"></i> <i class="fab fa-twitter icon blue"></i> <i class="fas fa-envelope icon green"></i> <p>مرر على الايقونة لرؤية التجربة</p> </body> </html> |
تحميل المكتبة
اذا اردت تحميل المكتبة واستخدامها بشكل منفصل ، قم بتحميلها من الموقع الرسمي التالي :
https://fontawesome.com/download
اضف الكود التالي بعد وسم <head> في ملف html
|
1 |
<link rel="stylesheet" href="css/all.min.css"> |
زيارة الموقع الرسمي : https://fontawesome.com
--- نقاط بحث ---
- تحميل اب ستور
- تحميل الاب ستور
- تحميل التطبيقات المدفوعة مجانا من الاب ستور
