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

4 مشترك

اذهب الى الأسفل

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

مُساهمة من طرف ali_baba الإثنين 14 أغسطس 2017 - 23:34

السلام عليكم و رحمة الله و بركاته أعضاء و خبراء منتدى الدعم و المساعدة. 
هذا أول موضوع لي هنا و أرجو أن أكون قد وضعتُهُ في مكانه المناسب، رغم أنني عضو قديم جدا جدا... حيث أنني كنتُ دائما أعتمد على البحث و كنتُ دائم و الحمد لله أجد ضالتي في كل ما يحتويه الأرشيف. 

أولا رابط منتداي هو: منتديات التفوق.
طلبي هو كالآتـي....  
أريد أن أستعمل أيقونات موقع fontawesome على الرئيسية في أزرار الناف بار كما نستعملها على مدونات بلوجر. 

الصورة الحالية هي كالآتي: 

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


و أريد إضافة أيقونات موقع fontawesome على الرئيسية في أزرار الناف بار لتصبح كما يلي على سبيل المثال: (الصورة عدلتُها فقط بالـــPaint). 

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


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


إذا كان هناك حل أخر كإضافة صور مثلا للأزرار (ليس أيقونات الصور)... فأرجو أن تمدوني به أيضا و شكرا لكم. 


كل الشكر و التقدير لمن يقدم لي المساعدة
في انتظار جواب من خبرائنا... 
دمتم في أمان الله. 


عدل سابقا من قبل ali_baba في الخميس 17 أغسطس 2017 - 18:17 عدل 1 مرات
ali_baba
ali_baba

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

ذكر
عدد المساهمات : 17
معدل النشاط : 3785
السُمعة : 1

http://achaamel.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف النجم الذهبى الإثنين 14 أغسطس 2017 - 23:44

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

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

ذكر
عدد المساهمات : 19882
معدل النشاط : 20528
السُمعة : 153

https://www.mixatk1.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف YasirAyad الثلاثاء 15 أغسطس 2017 - 2:35

مرحباً أخي العزيز بعذ أذن المساعد
أولاً يجب تركيب 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
 
 

ذكر
عدد المساهمات : 10113
معدل النشاط : 15253
السُمعة : 297

http://yasirayad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف ali_baba الثلاثاء 15 أغسطس 2017 - 14:27

ألف شكر لك أخي "النجم الذهبي" على ما قدمه لي في ردك... 
لكن ما أبحث عنه هو ما جاء به الأخ "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"]  في الكود.... 
و شكرا لك مرة أخرى و أعتذر على الإزعاج... 
ali_baba
ali_baba

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

ذكر
عدد المساهمات : 17
معدل النشاط : 3785
السُمعة : 1

http://achaamel.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف ali_baba الثلاثاء 15 أغسطس 2017 - 17:26

ألف شكر لك مرة أخرى أخي "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

و إليك الصور بعد ما قمتُ بما أرشدتَني إليه بارك الله فيك. 
أيقونات موقع fontawesome على النافبار الرئيسية Firesh11

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

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

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

ذكر
عدد المساهمات : 17
معدل النشاط : 3785
السُمعة : 1

http://achaamel.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف JoryAbdallah الثلاثاء 15 أغسطس 2017 - 21:01

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

انثى
عدد المساهمات : 3030
معدل النشاط : 8173
السُمعة : 295

http://taqnyiat.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف ali_baba الثلاثاء 15 أغسطس 2017 - 21:35

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
ali_baba

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

ذكر
عدد المساهمات : 17
معدل النشاط : 3785
السُمعة : 1

http://achaamel.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف YasirAyad الأربعاء 16 أغسطس 2017 - 9:53

ali_baba كتب:بالنسبة للكود الذي قدمتَه لي، لا أعرف كيف يجب التعامل معه... 
مثلا بالذهاب إلى موقع Fontawesome، و نريد أن نأخذ أيقونة الرئيسية "home"... فهي كما يلي... 
الكود:
<i class="fa fa-home" aria-hidden="true"></i>
فكيف يمكنني أن أستبدل [href="/groups"]  في الكود.... 
و شكرا لك مرة أخرى و أعتذر على الإزعاج... 
عفواً عزيزي بخصوص الزر يمكنك الذهاب الى الايقونات وتضغط على الايقونة التي تريدها بالزر الأيمن من الماوس ثم تختار اخر خيار وهو حص العنصر لتظهر لك كما يظهر في الصورة في الاسفل وقم بالخطوات من الرقم واحد تحديد الزر ثانياً اختار الديف ثم مرر على بيفور ليظهر لك css على اليمين ثم تنسخ الرقم لتستعملة في الكود 
وشكراً لك انك قمت بأدراج الاكواد جميعها هنا لتعم الفائدة للجميع ..  Cool

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

ذكر
عدد المساهمات : 10113
معدل النشاط : 15253
السُمعة : 297

http://yasirayad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف JoryAbdallah الأربعاء 16 أغسطس 2017 - 15:35

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

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

انثى
عدد المساهمات : 3030
معدل النشاط : 8173
السُمعة : 295

http://taqnyiat.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف ali_baba الأربعاء 16 أغسطس 2017 - 17:51

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


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

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

الحمد لله.. أنني تمكنتُ من إضافة كل الأيقونات لكل الأزرار.... 
لكن يبقى فقط زر الخروج... و هذا هو الكود الذي استعملتُه، لكن دُون جدوى 
الكود:
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 
و شكرا لك مرة أخرة. 
ali_baba
ali_baba

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

ذكر
عدد المساهمات : 17
معدل النشاط : 3785
السُمعة : 1

http://achaamel.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف YasirAyad الخميس 17 أغسطس 2017 - 1:09

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

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

ذكر
عدد المساهمات : 10113
معدل النشاط : 15253
السُمعة : 297

http://yasirayad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف ali_baba الخميس 17 أغسطس 2017 - 18:16

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

الكود:
a#logout::before {
  content:"\f07b";
+}


ألف شكر لك أخي YasirAyad... 
نجح الأمر و لله الحمد و قد ظهرت الأيقونة بجانب زر الخروج.... 

مرة أخرى...
أقول ألف ألف شكر لكل من ساهم معي في حل هذه المشكلة و جزاكم الله كل الخير. 
ali_baba
ali_baba

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

ذكر
عدد المساهمات : 17
معدل النشاط : 3785
السُمعة : 1

http://achaamel.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف النجم الذهبى الخميس 17 أغسطس 2017 - 18:24

تم حل المشكلة & ينقل للأرشيف.
يرجى مراجعة : قوانين منتدى الدعم
النجم الذهبى
النجم الذهبى
 
 

ذكر
عدد المساهمات : 19882
معدل النشاط : 20528
السُمعة : 153

https://www.mixatk1.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

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