منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

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


انشاء منتدى مجاني شبيه بهذا المنتدى

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

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

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

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

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

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

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




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




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


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


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


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



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

http://achaamel.ahladalil.com

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

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

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

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

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

ذكر
عدد المساهمات : 18620
معدل النشاط : 16428
السُمعة : 90

http://el3malka.0wn0.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;
}
avatar
YasirAyad
 
 

ذكر
عدد المساهمات : 11125
معدل النشاط : 12867
السُمعة : 295

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



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

http://achaamel.ahladalil.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

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




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



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

http://achaamel.ahladalil.com

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

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

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

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


 التقنيات المتقدمة جديد الاكواد والقوالب الحصرية لتطوير منتداك
 ضع موضوعك بالقسم مناسب .. ولا تكرر الردود واتبع تعليمات المساعدين
avatar
JoryAbdallah
الاشراف العام
الاشراف العام

انثى
عدد المساهمات : 4184
معدل النشاط : 5760
السُمعة : 292

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

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



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

http://achaamel.ahladalil.com

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

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

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

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

avatar
YasirAyad
 
 

ذكر
عدد المساهمات : 11125
معدل النشاط : 12867
السُمعة : 295

http://yasirayad.com/

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

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

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

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

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


 التقنيات المتقدمة جديد الاكواد والقوالب الحصرية لتطوير منتداك
 ضع موضوعك بالقسم مناسب .. ولا تكرر الردود واتبع تعليمات المساعدين
avatar
JoryAbdallah
الاشراف العام
الاشراف العام

انثى
عدد المساهمات : 4184
معدل النشاط : 5760
السُمعة : 292

http://taqnyiat.ahlamontada.com/

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

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

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

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


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



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

http://achaamel.ahladalil.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;
}
avatar
YasirAyad
 
 

ذكر
عدد المساهمات : 11125
معدل النشاط : 12867
السُمعة : 295

http://yasirayad.com/

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

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

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

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

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


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

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



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

http://achaamel.ahladalil.com

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

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

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

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

ذكر
عدد المساهمات : 18620
معدل النشاط : 16428
السُمعة : 90

http://el3malka.0wn0.com/

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

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

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

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