منتديات الشامل
مرحبا بك في منتديات Achaamel
لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص، يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد، نتشرف بدعوتك لإنشائه.




 

شاطر | 
 

 استعمال أيقونات موقع fontawesome على الرئيسية في أزرار النافبار.

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
admin
avatar



المدير  العام
معلومات إضافية
تاريخ التسجيل : 31/08/2012
الجنس : ذكر
النقاط : 8710
السٌّمعَة : 58
عدد المساهمات : 109
الموقع : منتديات الشامل
المزاج : الحمد لله

https://www.achaamel.com/
مُساهمةموضوع: استعمال أيقونات موقع fontawesome على الرئيسية في أزرار النافبار.    الأربعاء 30 أغسطس 2017 - 13:52

استعمال أيقونات موقع fontawesome على الرئيسية في أزرار النافبار. 
في موضوعنا هذا سوف نتطرق إن شاء الله إلى كيفية استعمال أيقونات موقع fontawesome على الرئيسية في أزرار النافبار. 

و هذه صورة النافبار قبل وضع أيقونات موقع fontawesome


و إن شاء الله بعد وضع أيقونات موقع fontawesome، سيُصبح شكلها كما يلي (الصورة): 

و الطريقة سهلة إذ أنها تعتمد فقط على إضافة على ورقة CSS

أولاً يجب تركيب fontawesome في قالب overall_header كما يلي: 
لوحة إدارة المنتدى >> مظهر المنتدى >> التومبلايتات و القوالب >> إدارة عامة >> قالب overall_header
ثم نبحث في القالب عن الكود الآتي: 
الكود:
{CSS}

تحته مباشرة نضيف الكود التالي ثم سجل و نشر: 
الكود:
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

ثانياً  إدراج أكواد الأيقونات في ورقة CSS المنتدى...  
و الأكواد كلها ستكون على الشكل التالي: 
الكود:
a.mainmenu[href="/groups"]::before {
  content:"\f015";
  color:#666;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:16px;
  margin:0 4px;
}

بحيث أن تعليمات الكود هي: 
يجب استبدال فقط كلمة [groups] في الرابط إلى رابط الزر المراد تغير الايقونة فيه. 
كما يجب أيضاً تغيير "\f015" إلى رمز الأيقونة و تغير ما يناسبك في باقي الخصائص. 
و هذه هي الأكواد جاهزة لمن يستعصي عليه الأمر... 
بالنسبة لأكواد خاصية الــ content يمكنكم اختيار ما يناسبكم أو ما يعجبكم انطلاقا من الموقع التالي: من هنــــا
كود الرئيسية: 
الكود:
 a.mainmenu[href="/"]::before {
  content:"\f015";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود اليومية: 
الكود:
a.mainmenu[href="/calendar"]::before {
  content:"\f073";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود مكتبة الصور: 
الكود:
a.mainmenu[href="/gallery/index.htm"]::before {
    color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود 'س.و.ج': 
الكود:
a.mainmenu[href="/faq"]::before {
  content:"\f128";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود البحث: 
الكود:
a.mainmenu[href="/search"]::before {
  content:"\f002";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود الأعضاء: 
الكود:
a.mainmenu[href="/memberlist"]::before {
  content:"\f007";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود المجموعات: 
الكود:
a.mainmenu[href="/groups"]::before {
  content:"\f0c0";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود البيانات الشخصية: 
الكود:
a.mainmenu[href="/profile?mode=editprofile"]::before {
  content:"\f07b";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود الرسائل الخاصة: 
الكود:
a.mainmenu[href="/privmsg?folder=inbox"]::before {
  content:"\f0e0";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود التسجيل: 
الكود:
a.mainmenu[href="/register"]::before {
    content: "\f044";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود الدخول: 
الكود:
a.mainmenu[href="/login"]::before {
    content: "\f090";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

كود الخروج: 
الكود:
a#logout::before {
    content: "\f08b";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

و كما سبق و أن قلنا، يمكنكم التعديل على الخاصيات التالية بما يناسب موقعكم
الكود:
color:...... ;
 font-size:.......;
  margin:.......;

و لمن واجهته أي مشكلة... أو صعوبات... 
فنحن في انتظار ردودكم و مساعدتكم إن شاء الله. 
بالتوفيق للجميع.
توقيع العضو(ة): admin



الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
استعمال أيقونات موقع fontawesome على الرئيسية في أزرار النافبار.
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات الشامل :: منتدى تطوير المواقع :: قسم تطوير منتديات أحلى منتدى-
انتقل الى: