1 عمر قره محمد نشر 14 مارس 2023 أرسل تقرير نشر 14 مارس 2023 بتاريخ 5 دقائق مضت قال Ayman Alrawy: css.zip 611.19 kB · 1 تنزيل يوجد مشكلتين : الاولى هي انك اخطأت في استيراد الملفات، ولحل المشكلة يجب اضافة : ./css/ قبل اسم الملف في الـ href الخاصة بكل من ملفات الـ font awesome. جرب تعديل الكود للشكل : <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ayman's first project</title> <!-- main css file --> <link rel="stylesheet" href="./css/style.css"> <!-- normalize the css --> <link rel="stylesheet" href="./css/normalize.css"> <!-- google fonts --> <link rel=" preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- icon css --> <link rel="stylesheet" href="./css/all.min.css"> </head> <body> <i class="fa-solid fa-mustache"></i> <i class="fa-duotone fa-pen-nib"></i> </body> </html> والمشكلة الثانية هي ان الايقونات التي استخدمتها هي ايقونات غير مجانية، وإذا اردت استخدام الايقونات المجانية يجب ان تحدد على علامة free في محرك البحث الخاص بـ fontawesome. 1 اقتباس
1 Mustafa Suleiman نشر 14 مارس 2023 أرسل تقرير نشر 14 مارس 2023 الأسهل لك استخدام Font Awesome عن طريق CDN، وإليك الطريقة. يمكن تضمينها في مشروعك عن طريق إضافة الرابط الذي يشير إلى ملف CSS الخاص بـ Font Awesome في نطاق الرأس (header) في صفحات HTML الخاصة بك. وللحصول على الرابط الذي يشير إلى ملف CSS الخاص بـ Font Awesome أنصحك بالحصول عليه من موقع cdnjs، وباستطاعتك إختيار إصدار المكتبة الذي تريده وكمثال هذا رابط الإصدار 6.3.0 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> بعد ذلك، يمكنك إضافة الرابط المذكور أعلاه في نطاق الرأس (header) في صفحات HTML الخاصة بمشروعك. <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> والآن يمكنك استخدام الرموز (icons) الخاصة بـ Font Awesome في صفحات HTML الخاصة بك عن طريق استخدام العنصر <i> وإضافة الفئة المطلوبة لهذا العنصر. ويمكن العثور على الرموز والفئات المتاحة من موقع Font Awesome الرسمي، ويجب إختيار الأيقونات المجانية بتحديد خيار free أثناء البحث في موقع Font Awesome. على سبيل المثال، إذا كنت ترغب في استخدام الرمز الخاص بزر الإرسال (send)، فيمكنك استخدام الكود التالي: <i class="fas fa-paper-plane"></i> 1 اقتباس
0 عمر قره محمد نشر 14 مارس 2023 أرسل تقرير نشر 14 مارس 2023 هل يمكنك مشاركة ملفات المشروع بالكامل ؟ 1 اقتباس
0 عبدالباسط ابراهيم نشر 14 مارس 2023 أرسل تقرير نشر 14 مارس 2023 يمكنك أيضاً استخدام ال svg sprites في الأيقونات. حيث لها بعض الفوائد هي: تقليل عدد الطلبات HTTP لتحسين أداء الموقع تغيير حجم ولون وتأثيرات الأيقونات بسهولة باستخدام CSS تحسين جودة الصورة على جميع أحجام الشاشة دون فقدان التفاصيل دعم ألوان غنية وسجلات ألوان متوافقة ولاستخدام ال svg sprites يمكنك فقط إضافة الملفات ال sprites إلى أي مجلد لديك مثل مجلد الصور مثلاً الملفات التالية حسبة التنسيق المستخدم solid.svg regular.svg brands.svg الملفات السابقة هي المجانية فيمكنك إضافة الملف الذي ترغب باستخدامه والخطوة الأخيرة هو كتابة مسار الأيقونة كالتالي <svg> <use xlink:href="/المسار للملف/fa-brands.svg#facebook"></use> </svg> نكتب مسار الملف ثم اسم الملف ثم اسم الأيقونة فقط كما في المثال السابق 1 اقتباس
السؤال
Ayman Alrawy
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.