اذهب إلى المحتوى
  • 0

ايقونات ال fontawesome لا تعمل

Ayman Alrawy

بواسطة Ayman Alrawy

 مشاركة

السؤال

5 أجوبة على هذا السؤال

Recommended Posts

  • 1
عمر قره محمد عضو نشيط

عمر قره محمد

نشر
نشر
بتاريخ 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 عضو نشيط

Mustafa Suleiman

نشر
نشر

الأسهل لك استخدام 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
عبدالباسط ابراهيم عضو نشيط

عبدالباسط ابراهيم

نشر
نشر

يمكنك أيضاً استخدام ال svg sprites في الأيقونات.  حيث لها  بعض الفوائد هي:

  • تقليل عدد الطلبات HTTP لتحسين أداء الموقع
  • تغيير حجم ولون وتأثيرات الأيقونات بسهولة باستخدام CSS
  • تحسين جودة الصورة على جميع أحجام الشاشة دون فقدان التفاصيل
  • دعم ألوان غنية وسجلات ألوان متوافقة

ولاستخدام ال svg sprites يمكنك فقط إضافة الملفات ال sprites إلى أي مجلد لديك مثل مجلد الصور مثلاً الملفات التالية حسبة التنسيق المستخدم

  • solid.svg
  • regular.svg
  • brands.svg

الملفات السابقة هي المجانية فيمكنك إضافة الملف الذي ترغب باستخدامه والخطوة الأخيرة هو كتابة مسار الأيقونة كالتالي 

<svg>
  <use xlink:href="/المسار للملف/fa-brands.svg#facebook"></use>
</svg>

نكتب مسار الملف ثم اسم الملف ثم اسم الأيقونة فقط كما في المثال السابق

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...