روابط تذييل مخصصة (أيقونات)

:discourse2: ملخص روابط الرأس المخصصة (أيقونات) تتيح لك إضافة أيقونات مرتبطة إلى رأس Discourse بسهولة.
:eyeglasses: معاينة معاينة على منشئ مواضيع Discourse
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-icon-header-links
:open_book: جديد في مواضيع Discourse؟ دليل المبتدئين لاستخدام مواضيع Discourse

تثبيت مكون هذا الموضوع

الميزات

لقطات الشاشة

سطح المكتب

الجوال

الإعدادات

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

الاسم الوصف
روابط الرأس قائمة روابط بالخصائص التالية: العنوان، الأيقونة، الرابط، العرض والهدف
إضافة مسافة بيضاء إذا تم تحديدها، ستضيف بعض المسافة البيضاء بين أيقونات رأس Discourse الافتراضية والأيقونات المخصصة المضافة عبر هذا المكون
أيقونات SVG تضمين فئات أيقونات FontAwesome 6 لكل أيقونة مستخدمة في القائمة.

ملاحظات:

إذا لم تظهر الأيقونة التي تريد استخدامها، أضفها إلى إعداد svg_icons في المكون. إذا أضفت أيقونات جديدة، يجب أن تسبقها بادئات FontAwesome 6 مثل fab و far و fas.

الائتمان

يعتمد هذا على الدرس الرائع الذي قدمه @techAPJ هنا: https://meta.discourse.org/t/add-new-link-on-header-beside-search-icon/48621، وعلى موضوع رأس العلامة التجارية لـ @vinothkannans الذي كان مرجعًا ممتازًا لهيكل هذا المكون.


:discourse2: مستضاف بواسطةنا؟ تتوفر مكونات الموضوع للاستخدام في خططنا القياسية والتجارية وخطط المؤسسات.

93 إعجابًا
How are theme setting fields created?
Discourse Mingle
Header Submenus
Can I add a icon and link back to my homesite at the top bar
Login Required activated - after successfull login it transfers you to nonexisting page
Introducing Font Awesome 5 and SVG icons
Add custom buttons at the top of the site
How to use my own SVG icons in Custom Header Links theme component?
Adding a custom Link/Icon to the discourse header
Show "new topic" when not logged in
Help changing Help Guide Permalink
Customize the header with links, icons, or menus
Updated Custom Header Icon: Post Data via URL
Nextcloud support
(deprecated) Plugin outlet locations theme component
User custom field toggle for sidebar (SFW Mode)
Custom Homepage for Groups
Disclaimer section on the "about" page
Generic URL for private messages?
Add button in header for logged in users
Use decorateWidget to add text link to header
Visiting /admin/upgrade may lead to a server error
How to add a directory of people/businesses to my theme?
How to make Navbar SVG icons white?
How to make Navbar SVG icons white?
Add a link to user profile in the navigation
Adding icons rather than text
Clickable Social Icon Links on Profile
Create hyperlink from home logo
Upcoming Header Changes - Preparing Themes and Plugins
Left side hamburger menu on mobile
Air Theme
How to Integrate a Custom Plugin in discourse UI
How to Disable ALL User-to-User DMs/Chat without breaking Other Features?
Custom Header Links
Disable personal message between members
How to add a link icon to the header
How to remove iconified header links from mobile?
Header icons color on mouse hovering issue
Link on Top header to Go to Home page of main site
Missing custom header link icon after update
Upcoming Header Changes - Preparing Themes and Plugins
How to add a "button" which composes a pre-filled topic
[PAID] Moving the Anonymous icon onto the header
Category for Threads with zero replies?
Plugin: add a menu icon (next to search)
Discourse Mingle
Introducing Font Awesome 5 and SVG icons
Introducing Font Awesome 5 and SVG icons
Adding a link into the mobile header
How to create a dynamic header link?
How can I add a button to the header?
Looking for a freelancer to implement a custom Discourse theme (based on an existing mockup)
Problem with beta6: Header Link Theme Component no longer working
Discourse messaging guide for new users
Insert Link to External Website
My 2nd Discourse forum, 2 years after the first one
Custom Buttons with own functions
Link to external site remains in forum context somehow
Is it possible to add an icon to create New Topic in the navbar?
Is it possible to add an icon to create New Topic in the navbar?
Custom Admin Toolbox
2021: The Year in Review
External Links Icon
How to use my own SVG icons in Custom Header Links theme component?
Customizing your site with existing theme components

أواجه مشكلة مشابهة لما ذكره بعض الأشخاص أعلاه، حيث لا يظهر الأيقونة، لكن لا يزال بإمكاني النقر على الزر. قمت بتعديل إعداد الأيقونة لتصبح (على سبيل المثال) “fab-facebook-f” بدلاً من “facebook-f” فقط. بالنسبة لتويتر وموقعي الآخر، لا أواجه أي مشاكل، لكن بالنسبة لفيسبوك وLinkedIn، لا يزال الأمر لا يعمل.

تمكنت من فهم فيسبوك، لكنني لا أزال غير قادر على استخدام لينكدإن. أيضًا، هل هناك طريقة لإنشاء أيقونة مخصصة؟ هل يمكنني رفع شعار شركتي واستخدامه كأيقونة؟

أنا أيضاً – مع أيقونة Discord.

لماذا لا أرى قسم “أيقونات SVG” في أحدث إصدار؟

أنا أملك هذا:

يبدو لقطة شاشة الإعدادات هذه وكأنها المكون الموجود في https://meta.discourse.org/t/custom-header-links/90588/84، وهو مخصص لعرض روابط نصية وليس أيقونات.

أستطيع أن أفهم كيف أن تسمية المكونات مربكة:

  • https://github.com/discourse/discourse-header-links - روابط الأيقونات (هذا الموضوع)
  • https://github.com/discourse/discourse-custom-header-links - الروابط النصية (Custom Header Links)

ربما يجب عليك إضافة كلمة “أيقونة” إلى اسم هذا المكون @Johani؟

4 إعجابات

آه، هذا حلها بالفعل. نعم، كان الأمر محيرًا للغاية. إعادة التسمية ستكون رائعة!

تعديل: يبدو أن التحديث الأخير قام بتغيير اسم فئة ديسكورد بشكل خفي ليشمل “fab-” في المنتصف (على سبيل المثال، إذا كنت ترغب في تغيير لون الأيقونات؛ وهو ما سيجعله @OP ميزة أصلية رائعة - كان من الصعب اكتشافه قليلاً).

إعجاب واحد (1)

لـ LinkedIn، يمكنك استخدام fab-linkedin كاسم للأيقونة في هذا الإعداد

ولكن نظرًا لأن هذه الأيقونة غير مدرجة في مجموعة الأيقونات الافتراضية التي يستخدمها Discourse، ستحتاج أيضًا إلى إضافتها إلى الإعداد الآخر في المكون.

النتيجة تبدو هكذا بالنسبة لي

بالتأكيد، هناك قسم في هذا الموضوع يتحدث عن إضافة أيقونات مخصصة.

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

لقد قمت بإجراء هذا التغيير إلى جانب بعض تحسينات التنفيذ الأخرى هنا

تضيف التحديث الجديد فئات فريدة ذات بادئات لكل رابط بناءً على العنوان الذي تستخدمه. لذا، على سبيل المثال، إذا استخدمت

facebook, fab-facebook, https://facebook.com, vdm, blank

سيكون للرابط الفئة

header-icon-facebook

القالب هو header-icon-عنوان-الأيقونة

الذي يمكنك استهدافه باستخدام CSS على النحو التالي

.d-header-icons {
  .header-icon-facebook svg {
    fill: #4267b2;
  }

  .header-icon-twitter svg {
    fill: #1da1f2;
  }

  // أضف المزيد من الأيقونات هنا
}

وهو ما سينتج عنه شيء مثل هذا

colored icons

4 إعجابات

شكرًا لك على مساعدتك. لقد جربت استخدام “fab-linkedin” في كل من فئتي “روابط الرأس” و"أيقونات SVG". كما هو موضح في الصورة، لا يزال الأمر لا يعمل لسبب ما.

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

لست متأكدًا تمامًا من سبب عدم عمل ذلك. إليك كيف تبدو إعداداتي

فيسبوك، fab-facebook، https://facebook.com، vdm، blank
تويتر، fab-twitter، https://twitter.com، vdm، blank
لينكد إن، fab-linkedin، https://www.linkedin.com، vdm، blank

و

fab-facebook
fab-linkedin
fab-twitter

وهذا ما أراه أنا

هل يمكنك تجربة نفس الأمر مع أيقونة لينكد إن وإخباري إذا كانت مشكلتك لا تزال قائمة؟

إعجاب واحد (1)

هذا ما جربته، وقد جربت أيضًا أيقونات مختلفة. إليك كيف يبدو الأمر حاليًا.

الإعدادات:

الموقع الإلكتروني:

الأيقونات الوحيدة التي تعمل هي تلك التي لا تستخدم “fab-”، وهو أمر يبدو غريبًا. أخبرني برأيك.

مرحبًا ميشيل،

بما أنكِ من عملائنا، قمتُ بالدخول إلى موقعك وفحصه وأصلحت المشكلة نيابةً عنكِ. قمتُ بتحديث مكون القالب وضبط الإعدادات الصحيحة لأيقونات، ومن المفترض أن تعمل جميعها الآن.

5 إعجابات

يبدو رائعًا الآن، شكرًا لك!

إعجابَين (2)

سؤال/طلب آخر: كانت هذه الروابط تفتح في علامة تبويب منفصلة في البداية، لكنها الآن تفتح في نفس التبويب. الإعداد مضبوط بالفعل على “blank”، فكيف يمكنني تغيير ذلك؟

إعجابَين (2)

يبدو أن هذا عيب رجعي، وسنقوم بالتحقيق فيه وسنصلح المشكلة قريبًا.

إعجاب واحد (1)

بالفعل. لقد نسيتُ عن طريق الخطأ إضافة سمة الهدف في التغييرات الأخيرة.

لا حاجة لأي إجراء من جانبك. لقد قمت بإصلاح المكوّن وقمت بتحديثه على موقعك. لذا يجب أن يكون كل شيء جاهزًا الآن. شكرًا لك على الإبلاغ عن المشكلة :+1:

7 إعجابات

مرحباً،

تقع الأيقونات المخصصة على يمين زر تسجيل الدخول وزر إنشاء حساب، وأعتقد أنها ستكون أكثر ملاءمة على اليسار، كما هي معتادة عادةً.

image

image

3 إعجابات

يمكنني استخدام بعض أيقونات الإصدار 4.7.0 من Font Awesome Icons لتعمل ببساطة عن طريق كتابة الاسم (مثل car) في الجزء الصحيح من “روابط الرأس”. بعض الأيقونات لا تظهر (مثل fa-comments-o). وبعضها لا يتطلب مني استخدام “أيقونات SVG” (مثل home)، بينما يتطلب ذلك البعض الآخر (مثل car).

لم تعمل أي من أيقونات الإصدار 5 التي جربتها من Find Icons with the Perfect Look & Feel | Font Awesome. لقد وضعت اسم fa- في “روابط الرأس” و"أيقونات SVG" دون أي تأثير. ومع ذلك، فإن أيقونات fab-facebook (وغيرها) التي كانت موجودة افتراضيًا تعمل بشكل صحيح.

ما الخطأ الذي أقوم به؟

تعديل: قمت بتحرير الفقرة الأولى للدقة.

شكرًا جزيلاً لك يا @Johani. يعمل بشكل رائع ويوفّر لي حلاً “جماليًا” للعودة إلى الموقع (في حالتي).

ومع ذلك، واجهت مشكلة لأنني أستخدم أيضًا مكون قائمة الهامبرغر على الجانب الأيسر في الجوال، مما يتسبب في تعطيل كل شيء في ذلك الجزء من .d-header.

هل لديك أي أفكار حول كيفية جعل كلاهما يعملان معًا؟ سأقدر ذلك حقًا.

أواجه أيضًا مشكلة في ظهور أيقونتي. لست متأكدًا مما أفعله خطأ. إليك ما لدي في الإعدادات:

وهذا ما انتهى بي الأمر إليه:

بالنسبة لأيقونة الكتاب، جرب إزالة fas-

إعجابَين (2)