# تخصيص الأيقونة بدون استبدال شامل

**URL:** https://meta.discourse.org/t/customize-icon-without-global-replacement/366088
**Category:** Feature
**Created:** [14 مايو 2025، 12:44م UTC](https://meta.discourse.org/t/customize-icon-without-global-replacement/366088 "2025-05-14T12:44:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [14 مايو 2025، 12:44م UTC](https://meta.discourse.org/t/customize-icon-without-global-replacement/366088/1 "2025-05-14T12:44:08Z")

</div>

مرحباً، أود أن أسأل عن إمكانية السماح بتخصيص الأيقونات التي لا تقوم باستبدال شامل للأيقونات، على سبيل المثال، إذا أردت تغيير أيقونة الجمع + إلى أيقونة طائرة ورقية لإرسال رسالة فقط، فسوف ينتهي بي الأمر باستبدال جميع أيقونات + عبر الموقع، إلا إذا فاتني هذا كخيار في المستندات، أود حقًا أن تكون هناك القدرة على تحديد معرف/فئة أو عنصر حيث يمكنني استبدال الأيقونة بشكل خاص.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [14 مايو 2025، 1:02م UTC](https://meta.discourse.org/t/customize-icon-without-global-replacement/366088/2 "2025-05-14T13:02:01Z")

</div>

باستخدام CSS، يمكنك استهداف واستبدال مثيل معين للأيقونة.

يبدو أن هذا الموضوع يحتوي على بعض المعلومات

> [@Replace Discourse's default SVG icons with custom icons in a theme](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736?u=heliosurge):
>
> You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them [within a theme or theme component.](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#create-new-themes-and-theme-components-7)Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the \<svg\> tag contents from the original SVG icon file into \<symbol\> …

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [14 مايو 2025، 1:17م UTC](https://meta.discourse.org/t/customize-icon-without-global-replacement/366088/3 "2025-05-14T13:17:22Z")

</div>

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

في الوقت الحالي، هذه هي الطريقة التي أستبدل بها أيقونة “موضوع جديد”

```plaintext
  api.onPageChange(() => {
    const button = document.querySelector("#create-topic");

    if (button) {
      const oldSvg = button.querySelector("svg");
      if (oldSvg) {
        oldSvg.remove();
      }
      const ns = "http://www.w3.org/2000/svg";
      const svg = document.createElementNS(ns, "svg");
      svg.setAttribute("xmlns", ns);
      svg.setAttribute("viewBox", "10 10 30 30");
      svg.setAttribute("width", "28");
      svg.setAttribute("height", "28");
      svg.setAttribute("class", "svg-icon custom-icon");
      svg.innerHTML = `
        (كود أيقونة SVG هنا)
      `;

      button.insertBefore(svg, button.firstChild);
    }
  });

```

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [14 مايو 2025، 1:28م UTC](https://meta.discourse.org/t/customize-icon-without-global-replacement/366088/4 "2025-05-14T13:28:23Z")

</div>

لا يمكن ذلك في الوقت الحالي باستثناء بعض الحالات الخاصة.

هذا الموضوع هو طلب مكرر، لذلك سأغلق هذا الموضوع لصالح [https://meta.discourse.org/t/change-single-instance-of-icon/336356،](https://meta.discourse.org/t/change-single-instance-of-icon/336356%D8%8C) والذي يحتوي أيضًا على مثال لـ [إضافة أيقونة عبر CSS](https://github.com/discourse/discourse/blob/c6f77c27add9e67b384835ebbf0d489f239936bf/plugins/poll/assets/stylesheets/common/poll.scss#L472-L482).

لا تتردد في التصويت على هذا الموضوع وإضافة أي تفاصيل إضافية هناك إذا لزم الأمر!

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [14 مايو 2025، 1:28م UTC](https://meta.discourse.org/t/customize-icon-without-global-replacement/366088/5 "2025-05-14T13:28:29Z")

</div>

تكرار لـ [Change single instance of icon](https://meta.discourse.org/t/change-single-instance-of-icon/336356)
