# كيفية تغيير لون أيقونة الرأس؟
**URL:** https://meta.discourse.org/t/how-to-change-header-icon-color/106098
**Category:** Development
**Created:** [9 يناير 2019، 7:11م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098 "2019-01-09T19:11:15Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Sentinelrv](https://meta.discourse.org/u/Sentinelrv)
#### Post date: [9 يناير 2019، 7:11م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/1 "2019-01-09T19:11:15Z")
هذا هو شكل منتدانا حاليًا…
سنقوم بإعادة هيكلة مخطط الألوان الخاص بنا. سيكون الرأس باللون الأخضر مع شعار أبيض في الرأس.
أواجه صعوبة في معرفة كيفية تغيير ألوان أيقونة العدسة المكبرة وأيقونة قائمة الهامبرغر في الرأس. هما رماديان حاليًا، وهو ما سيبدو سيئًا جدًا فوق رأس أخضر. كما أن الأيقونات البيضاء ستتناسب مع شعار الرأس الجديد.
لقد بحثت في قائمة المظهر ورأيت خيارًا يُسمى “الرئيسي للرأس”، والذي يذكر في وصفه أنه يغير النصوص والأيقونات في رأس الموقع. ومع ذلك، فقد قمت بالفعل بتعيينه على الأبيض ولم يتغير شيء. هل توجد طريقة أخرى لتغيير لون هاتين الأيقونتين؟
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [9 يناير 2019، 7:32م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/2 "2019-01-09T19:32:15Z")
The icons are a bit transparent, which might be throwing you off (that’s why they look grey instead of white when the header\_primary color is set to white).
You can add some custom CSS to change this
```plaintext
.d-header-icons .icon {
color: red; // custom color, if needed
&.btn-flat .d-icon {
opacity: 1; // remove transparency
}
}
```
---
### Author:  [@outofthebox](https://meta.discourse.org/u/outofthebox)
#### Post date: [18 فبراير 2019، 2:39م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/3 "2019-02-18T14:39:10Z")
Hi,
I have this CSS:
```
header{
height: auto !important;
.wrap{
padding:14px 0;
}
.btn-flat .d-icon{
opacity: 1 !important;
}
.d-header-icons .icon{
color: #ffffff;
padding: 0.4em;
}
.d-header-icons .icon:hover{
background-color: #ffffff;
opacity: 1 !important;
color: #001d4d;
}
```
However, perhaps as we are now on one of the latest releases, now the home, search, and menu icons are greyed out. Can you explain how to make these icons white with opacity of 1? Did any of the selectors change?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [18 فبراير 2019، 4:46م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/4 "2019-02-18T16:46:34Z")
Yes, these selectors are a little more specific now and we removed the opacity entirely in favor of using a solid color (there was a bug in Safari where SVG icons were clipped slightly because of the opacity).
You can remove anything you have related to opacity, and do this
```CSS
.d-header-icons .d-icon {
color: #fff;
}
.d-header-icons .d-icon:hover {
background-color: #fff;
color: #001d4d;
}
```
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [29 أبريل 2019، 8:42م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/5 "2019-04-29T20:42:46Z")
I have a similar problem as the OP, probably somewhat simpler: For some reason the colour of the header icons got darker for no apparent reason (I assume it was related to the tidy-up measures on your side). Since my header is a darkish, I want the icons brighter.
I tried this
> [@awesomerobot](#):
>
> .d-header-icons .d-icon { color: #fff; }
and am happy with the result. But I can’t seem to figure out how the hover settings work. With only the above css, my hover looks like this:
So the icon turns grey again, which is okay, but I’d like to try some other tints on it. The background seems to turn white (or almost white), which I would like to change to make it coherent with other menus.
I tried
```css
.d-header-icons .d-icon:hover {
background-color: #b0cee8;
color: #fff;
}
```
but it gives me this:
How do I get the whole box to change color? And I don’t understand why the icon itself doesn’t stay white…
And while I’m at it: My new topic button also suffered. The colour of the + icon is no longer the same as the text:
My CSS for the button is (and has always been):
```css
@import "common/foundation/variables";
#create-topic {
background-color: $tertiary;
color: $secondary;
}
#create-topic:hover {
background-color: $tertiary-high;
color: $secondary;
}
```
---
### Author:  [@Nick\_Research](https://meta.discourse.org/u/Nick_Research)
#### Post date: [27 أغسطس 2019، 4:49ص UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/6 "2019-08-27T04:49:57Z")
مرحبًا، لقد حدث تغيير منذ اقتراحك. لست متأكدًا من السبب، لكن هذا لا يعمل معي أيضًا. يبدو ملف CSS كالتالي:
```
.custom-header-links a:hover {
background-color:#346A77;
}
.d-header-icons .d-icon {
color: black;
}
.d-header-icons .d-icon:hover {
background-color: #346A77;
color: red;
}
```
تبدو الأيقونات وتأثير التحويم (hover) كما يلي—بغض النظر عن اللون الذي أختاره للأيقونات أو للتحويم، لا يبدو له أي تأثير:
عند فحص العنصر، يظهر أن النمط موجود، لكنه لا ينطبق لسبب ما. هل لديك أي أفكار؟
لقد قمت بتثبيت رؤوس مخصصة، لكن هذا لا ينبغي أن يغير أي شيء، أليس كذلك؟
شكرًا جزيلاً
---
### Author:  [@Nick\_Research](https://meta.discourse.org/u/Nick_Research)
#### Post date: [27 أغسطس 2019، 5:01ص UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/7 "2019-08-27T05:01:48Z")
تحديث: الكود التالي يعمل، وهذا يجب أن يحل مشكلتك أيضًا @tophee:
```
.d-header-icons .d-icon {
color: black !important;
}
.d-header-icons a:hover {
background-color: #346A77 !important;
}
```
---
### Author:  [@Denis\_Heraud](https://meta.discourse.org/u/Denis_Heraud)
#### Post date: [18 ديسمبر 2019، 6:33م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/8 "2019-12-18T18:33:57Z")
شكرًا لك على الكود.
أنا أنشر هذا في حال واجه شخص ما نفس المشكلة التي واجهتها أنا، ولكن اعتمادًا على مجموعة الألوان التي تستخدمها لرأس الصفحة وأيقونتك (رأس الصفحة لدي بلون غامق)، كنت أحصل على مجموعات الألوان الصحيحة لأيقونتي باستخدام الكود الذي قدمته:
```
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
```
ومع ذلك، في كل مرة كنت أضغط على أيقونات رأس الصفحة ثم أخرج من وضع التحويم عليها، كان الخلفية تعود إلى اللون الأبيض الصلبة، وهو ما لم يكن يعمل لأن رأس الصفحة لدي غامق والأيقونات مضبوطة على اللون الأبيض. لذا، عند الخروج من وضع التحويم (بعد النقر)، كانت تظهر كمستطيل أبيض صلب. لحل هذه المشكلة، كل ما كنت بحاجة إلى فعله هو تعيين الحالة لـ “a” أيضًا، وليس فقط “a:hover” كما في المنشورات السابقة (#93bb54 هو نفس لون رأس الصفحة الخاص بي):
```
.d-header-icons .d-icon {
color: white !important;
}
.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
}
.d-header-icons a {
background-color: #93bb54 !important;
color: white !important;
}
```
ها قد تم!
---
### Author:  [@Denis\_Heraud](https://meta.discourse.org/u/Denis_Heraud)
#### Post date: [18 ديسمبر 2019، 6:43م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/9 "2019-12-18T18:43:19Z")
مرحبًا @awesomerobot، لماذا لا يعمل هذا الكود:
```
.d-header-icons .d-icon {
color: white !important;
}
```
على الأيقونات الأخرى مثل أيقونة الظرف في المحادثة، وهي أيضًا d-icon كما يظهر عند فحص العنصر؟
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [20 ديسمبر 2019، 3:23م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/10 "2019-12-20T15:23:27Z")
`.d-header-icons` تشير تحديدًا إلى شريط التنقل على اليمين.
لأيقونة عنوان الرسالة الخاصة، ستحتاج إلى:
`.extra-info-wrapper .private-message-glyph { color: red }`
ولحالات الموضوعات الأخرى، مثل الموضوعات المثبتة والمغلقة، يمكنك استخدام:
`.extra-info-wrapper .topic-statuses .d-icon { color: red; }`
---
### Author:  [@brikohler](https://meta.discourse.org/u/brikohler)
#### Post date: [24 ديسمبر 2019، 7:30م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/11 "2019-12-24T19:30:23Z")
أضفت بعض الأيقونات المخصصة بصيغة SVG، لكنني لا أستطيع تغيير لونها باستخدام CSS. فهي تظهر دائمًا باللون الأسود. يمكنني تغيير الشفافية والحجم… لكن لا يمكنني أبدًا تغيير اللون.
جربت استخدام الأمثلة المذكورة أعلاه، لكن لم يعُد أي منها النتيجة المتوقعة.
```css
.list-controls .btn .d-icon{
color: #2CC3D5 !important;
opacity: 0.5;
}
```
لقد جربت ذلك أيضًا لأيقونات الرأس.
ما الخطأ الذي أقوم به؟
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [6 يناير 2020، 4:10م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/12 "2020-01-06T16:10:52Z")
هل تم تحديد لون للأيقونة مضمنًا في كود SVG؟ على الأرجح سيبدو هكذا:
في حال كان الأمر كذلك، يمكنك إما حذفه أو تغيير القيمة إلى `currentColor`.
---
### Author:  [@hjalali](https://meta.discourse.org/u/hjalali)
#### Post date: [3 أبريل 2020، 9:02ص UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/13 "2020-04-03T09:02:00Z")
مرحباً يا أصدقاء،
لدي مشكلة عند:
1. النقر على القائمة (يبدو الأمر رائعاً حتى هذه النقطة)
2. عند تحريك الماوس بعيداً، أحتاج إلى تغيير لون الأيقونة تماماً كما يتغير لون الخلفية، لأن الأيقونة تختفي خلف اللون الأبيض:
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [3 أبريل 2020، 9:25ص UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/15 "2020-04-03T09:25:00Z")
### Author:  [@Juless](https://meta.discourse.org/u/Juless)
#### Post date: [22 أغسطس 2020، 11:28ص UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/16 "2020-08-22T11:28:12Z")
كيف يمكنني تغيير تنسيق CSS لأيقونة معينة؟
``
هذه هي الأيقونة التي أحاول تطبيق تنسيق CSS عليها
---
### Author:  [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [22 أغسطس 2020، 11:52ص UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/17 "2020-08-22T11:52:43Z")
> [@Juless](#):
>
> fa d-icon d-icon-bolt svg-icon svg-node
تفضل، @Juless
هذه الأنواع من محددات CSS المحددة جدًا يجب أن تعمل، لكنها نادرًا ما تُستخدم لأنها عادةً لا تكون هناك حاجة إلى هذا القدر من التحديد:
```plaintext
svg.fa.d-icon.d-icon-bolt.svg-icon.svg-node{
/* CSS الخاص بك هنا */
}
```
ومع ذلك، في الممارسة العملية، يجب أن يعمل هذا المحدد البسيط بشكل جيد:
```plaintext
svg.d-icon-bolt{
/* CSS الخاص بك هنا */
}
```
أتمنى أن يكون هذا مفيدًا.
ربما يمكنك حتى “الاستغناء عن” هذا:
```plaintext
.d-icon-bolt{
/* CSS الخاص بك هنا */
}
```
---
### Author:  [@Juless](https://meta.discourse.org/u/Juless)
#### Post date: [22 أغسطس 2020، 12:01م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/18 "2020-08-22T12:01:14Z")
> [@neounix](#):
>
> هذه الأنواع من محددات CSS المحددة جدًا يجب أن تعمل، لكنها نادرًا ما تُستخدم لأنها عادةً غير ضرورية إلى هذا الحد من التحديد:
>
> ```plaintext
> svg.fa.d-icon.d-icon-bolt.svg-icon.svg-node{
> /* كود CSS الخاص بك هنا */
> }
>
> ```
استخدمت هذا المحدد وعمل بشكل ممتاز. شكرًا لك @neounix، كنت مفيدًا جدًا.
---
### Author:  [@401Ott](https://meta.discourse.org/u/401Ott)
#### Post date: [13 سبتمبر 2020، 3:12ص UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/19 "2020-09-13T03:12:46Z")
لدي نفس الموقف مثل [Sentinelrv](https://meta.discourse.org/u/Sentinelrv). قمت بتعديل header\_primary إلى اللون الأبيض وطبقت أيضًا CSS المخصص الموصى به على كل من قوالباتي، لكن عدسة المكبرة وقائمة الهامبرغر لا تزال رمادية.
---
### Author:  [@lejeczek](https://meta.discourse.org/u/lejeczek)
#### Post date: [16 سبتمبر 2023، 6:53ص UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/20 "2023-09-16T06:53:40Z")
> [@401Ott](#):
>
> لا تزال قائمة هامبرغر رمادية
أنا أيضًا لا أستطيع تغيير ألوان قائمة الهامبرغر/الشريط، أيقونة البحث/العثور تغيرت - لقد جربت جميع النصائح المذكورة أعلاه وأكثر من خلال فحص الأشياء في متصفح الويب ولكن (لست مطور ويب) فشلت. هل توصل أحد إلى حل لهذه المشكلة؟
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [16 سبتمبر 2023، 3:06م UTC](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/21 "2023-09-16T15:06:21Z")
بالنسبة للأيقونات العلوية على الجانب الأيمن، في common-css الخاص بموضوع أو مكون سمة:
```scss
.d-header .d-header-icons .d-icon {
color: !important;
&:hover {
color: !important;
}
}
```
بالنسبة للأيقونة الهامبرغر في وضع قائمة الشريط الجانبي:
```scss
.d-header .header-sidebar-toggle button .d-icon {
color: !important;
&:hover {
color: !important;
}
}
```
``, ``, ``, `` = قيم سداسية عشرية، أسماء ألوان، أو متغيرات ألوان السمة. يمكنك أيضًا تحديد background-color إذا كنت ترغب في تغيير لون خلفية الأيقونة.
ملاحظة: إذا كنت تستخدم وضع القائمة المنسدلة للهامبرغر بدلاً من الشريط الجانبي، فإن المقتطف الأول لأيقونات الرأس على الجانب الأيمن سيشمل أيضًا أيقونة الهامبرغر.