ليان أبو شعر نشر 8 ديسمبر 2021 أرسل تقرير نشر 8 ديسمبر 2021 لوسمحت كيف ممكن أجيب ال الأيقونات هاي باستخدام لغة ال Htmlوcss بدون ادراجها ع شكل صورة (الفيس بوك وال inو ال Twitter لاضعها قبل تسكيرة ال div للكود المحدد 2 اقتباس
0 محمد أبو عواد نشر 8 ديسمبر 2021 أرسل تقرير نشر 8 ديسمبر 2021 يوجد مكتبة جاهزة لهذه الأيقونات اسمها مكتبة fontawesome , يمكنك الذهاب اليها من هنا , يمكنك البحث عن أي أيقونة بالاسم الخاص بها , مثلا أيقونة لفيسبوك , يمكنك البحث باستخدام كلمة facebook , بداية يجب عليك تضمين المكتبة , يمكنك تحميل ملفاتها الخاصة بها وهي عبارة عن ملفات css وجافاسكربت وخطوط , أو يمكنك الاستغناء عن الملفات واستخدام رابط cdn مباشر لها , يمكنك استخدام السطر التالي <script src="https://kit.fontawesome.com/597cb1f685.js" crossorigin="anonymous"></script> بعد نسخ السطر السابق ولصقه في ملف html يمكنك استخدام الأيقونات الأيقونات عبارة عن كود , والعنصر الخاص بها i , فمثلا أيقونة فيسبوك هكذا الكود الخاص بها <i class="fab fa-facebook"></i> بعد تضمين المكتبة يمكنك كتابة أي كود لأي ايقونة مثل السطر السابق , يمكنك الحصول على الأكواد الخاصة بكل ايقونة من خلال الضغط عليها ونسخ الكود الخاص بها , سوف تجديه كما هو واضح لك بالصورة التالية يمكنك البحث عن باقي الأيقونات ونسخ الكود الخاص بها , ويمكنك وضعهم في أي مكان تريديه حسب التصميم الخاص بك , يمكنك ايضا تنسيق الأيقونات وتلوينها والتحكم في حجمها , يمكنك اعطاء العنصر i كلاس ليكن اسمه test ومن خلال css تقومين باعطاء الصنف بعض التنسيقات مثل أي صنف اخر 1 اقتباس
0 أسامة زيادة نشر 8 ديسمبر 2021 أرسل تقرير نشر 8 ديسمبر 2021 يمكنك فعل ذلك باستخدام مكتبة font awesome من خلال جلب الرابط cdn الخاص بها وتضمينه بهذا الشكل <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> وكتابة الأيقونات بالشكل التالي <body> <i class="fab fa-facebook-square"></i> <i class="fab fa-linkedin"></i> <i class="fab fa-twitter-square"></i> </body> وهذا مرفق لرؤية كيفية ظهورها icon.html 1 اقتباس
السؤال
ليان أبو شعر
لوسمحت كيف ممكن أجيب ال الأيقونات هاي باستخدام لغة ال Htmlوcss بدون ادراجها ع شكل صورة (الفيس بوك وال inو ال Twitter
لاضعها قبل تسكيرة ال div للكود المحدد
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.