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

وعليكم السلام ورحمة الله وبركاته

لوحة الاداره
مظهر المنتدي
ادارة الصور
لوحة اداره كامله 
وهناك ضع صور الازرار

ثم
لوحة الاداره 
مظهر المنتدي
الصفحه الرئيسيه وازرار التصفح
اظهار الصور فقط في عارضة ازرار التصفح 
يمكنك اختيار (نعم) لاظهار الصور فقط 
او اختيار (لا) لاظهار صورة الزر واسمه

مرحباً أخي العزيز بعذ أذن المساعد
أولاً يجب تركيب fontawesome 
ثانياً  أدراج كود التالي CSS في ورقة CSS المنتدى 
تعليمات الكود :
استبدل فقط من [href="/groups"] الرابط غيرة برابط الزر المراد تغير الايقونة فيه. 
أيضاً   content:"\f015"; غير رقم الزر بما يناسبك والكود التالي جاهز يمكنك استخدامة وتغير ما يناسبك وتكرر الكود كاملاً مع تغير ما طلب منك لكل زر .. 

الكود:

 a.mainmenu[href="/groups"]::before {
  content:"\f015";
  color:#666;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:16px;
  margin:0 4px;
}

ألف شكر لك أخي "النجم الذهبي" على ما قدمه لي في ردك... 
لكن ما أبحث عنه هو ما جاء به الأخ "YasirAyad" و ألف ألف شكر لكما. 

أخي "YasirAyad"، إذا فهمتُ جيدا ما جاء في ردك.. فهو كالآتي... 

- يجب أولا أن أقوم بتركيب Fontawesome في ورقة CSS و هو كالآتي حسب ما وجدتُه في أحد المواضيع التي سبق لي و أن أشرت لها في طلبي. 

الكود:

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>[size=19][/size]
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

بالنسبة للكود الذي قدمتَه لي، لا أعرف كيف يجب التعامل معه... 
مثلا بالذهاب إلى موقع Fontawesome، و نريد أن نأخذ أيقونة الرئيسية "home"... فهي كما يلي... 

الكود:

<i class="fa fa-home" aria-hidden="true"></i>

فكيف يمكنني أن أستبدل [href="/groups"]  في الكود.... 
و شكرا لك مرة أخرى و أعتذر على الإزعاج... 

ألف شكر لك مرة أخرى أخي "YasirAyad"... 
لقد ثم الحل بنسبة كبيرة و الحمد لله... 
و يمكنك معاينة النتيجة من منتداي... من هنــــــــا
و هذه هي الأكواد التي قمتُ بإضافة... (و أضعها هنا كلها فقط لكَي تَعُمَّ الفائدة إن شاء الله)

الرئيسية: 

الكود:

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="/publi"]::before {
  content:"\f164";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}

س.و.ج (FAQ): 

الكود:

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;
}

و بطيعة الحال... يمكن لأي شخص أن يُغير كما يريد في القيم: 

الكود:

color:...... ;
 font-size:.......;
  margin:.......;

لكن المشكلة التي واجهتُها هي أنني لا أعرف الروابط الخاصة لكل من: 
      - التسجيل. 
      - دخول. 
      -خروج. 
بحيث أنني استعملتُ هذه الأكواد، لكنها لم تعمل... و الأكواد هي لكل منها على التوالي: 

الكود:

a.mainmenu[href="register"]::before
a.mainmenu[href="login"]::before
a.mainmenu[href="logout"]::before

و إليك الصور بعد ما قمتُ بما أرشدتَني إليه بارك الله فيك. 




في انتظار جوابك أخي "YasirAyad" أو أي خبير آخر و جزاكم الله عنا كل الخير. 

دخول
f090
خروج
f08b
التسجيل
f2ce

JoryAbdallah كتب:

..........

شكرا لك أخي عبد الله... 
المشكلة عندي ليست في رمز الأيقونات... 
المشكلة هي في الرابط الذي يجب وضعه في هذا الكود بالنسبة لكل من "دخول" و "خروج" و "التسجيل"

الكود:

a.mainmenu[href="الرابط"]::before {
    content: "رمز الأيقونة";

}

و هذه هي الروابط التي استعملتُها، لكنها لم تعمل (أي أن الأيقونات لم تظهر). 

الكود:

a.mainmenu[href="/register"]::before {
    content: "\f2ce";
}
a.mainmenu[href="/login"]::before {
    content: "\f090";
}
a.mainmenu[href="/logout"]::before {
    content: "\f08b";
}

و هنا أتسائل... هل هذه هي الروابط الصحيحة أم لا....؟؟؟؟؟؟
و ألف شكر لك مرة أخرى....

ali_baba كتب:

بالنسبة للكود الذي قدمتَه لي، لا أعرف كيف يجب التعامل معه... 
مثلا بالذهاب إلى موقع Fontawesome، و نريد أن نأخذ أيقونة الرئيسية "home"... فهي كما يلي... 

الكود:

<i class="fa fa-home" aria-hidden="true"></i>

فكيف يمكنني أن أستبدل [href="/groups"]  في الكود.... 
و شكرا لك مرة أخرى و أعتذر على الإزعاج... 

عفواً عزيزي بخصوص الزر يمكنك الذهاب الى الايقونات وتضغط على الايقونة التي تريدها بالزر الأيمن من الماوس ثم تختار اخر خيار وهو حص العنصر لتظهر لك كما يظهر في الصورة في الاسفل وقم بالخطوات من الرقم واحد تحديد الزر ثانياً اختار الديف ثم مرر على بيفور ليظهر لك css على اليمين ثم تنسخ الرقم لتستعملة في الكود 
وشكراً لك انك قمت بأدراج الاكواد جميعها هنا لتعم الفائدة للجميع ..  

جرب عمل كود كذا

الكود:

a[href*="/login"].mainmenu
a[href="/register"].mainmenu

السلام عليكم و رحمة الله و بركاته
ألف ألف ألف شكر لكل من ساهم في الموضوع و جزاكم الله كل الخير. 


الحمد لله أن الأمر نجح بالنسبة لكل من "التسجيل" و "الدخول".... و الخطأ كان من عندي، إذ أنني نسيت أن أضع "/" قبل login و register... (و أعتذر). 
و إليكم الصور.... 


أما بالنسبة لزر "الخروج"... فقد جربتُ كل ما جاء في الردود و كل شيء و لم ينجح الأمر... و إلكم الصورة. 


الحمد لله.. أنني تمكنتُ من إضافة كل الأيقونات لكل الأزرار.... 
لكن يبقى فقط زر الخروج... و هذا هو الكود الذي استعملتُه، لكن دُون جدوى 

الكود:

a.mainmenu[href="/logout"]::before {
    content: "\f08b";
    color: #fff;
    font-family: FontAwesome;
    font-weight: normal;
    font-size: 15px;
    margin: 0px -10px;
}

أخي YasirAyad. 
بالنسبة للكود الذي أشرتُ به إليك و هو كالآتي: 

الكود:

<i class="fa fa-home" aria-hidden="true"></i>

فقد كنتُ آمل أن أستعمله في الـــHTML 
أما الطريقة التي أشرتَ إليها أنت، فهي تعتمد على CSS 
و شكرا لك مرة أخرة. 

نعم الطريقة فقط CSS 
بخصوص زر الخروج تفضل الكود التالي.  

الكود:

a#logout::before {
  content:"\f07b";
  color:#fff;
  font-family:FontAwesome;
  font-weight:normal;
  font-size:15px;
  margin:0px -10px;
}