APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

How to change font-awesome icon color in navigation menu list -Apex 18.1

NavyanishiOct 9 2018 — edited Oct 16 2018

Hi All,

How can I give color to font awesome icons inside list. I have tried but it is not reflecting ,for now I have applied color using jquery in template level using this icon class. I have applied this code in template level so where ever that font awesome icon is used that icon color got changed. I want to apply color to this in list level. So, Is there anything that I can do for this??

Can anyone please help me in finding a solution on this.

Thanks in advance.

This post has been answered by fac586 on Oct 9 2018

Jump to Answer

fac586

Navyanishi wrote:

Can anyone please help me in finding a solution on this.

See

2 people found this helpful

Kiran Pawar

Hi Navyanishi,

Navyanishi wrote:

Can anyone please help me in finding a solution on this.

You can use the color modifiers for Universal Theme (if you are using Universal Theme).

Refer: https://apex.oracle.com/pls/apex/f?p=42:6302:::NO::: (UT Guide)

Hope this helps!

Regards,

Kiran

Navyanishi

Thanks ...I will go through this

Navyanishi

So , without jquery/css we can't achieve this?? I mean can't we do anything inside list attributes for colouring icons??

fac586

Answer

Navyanishi wrote:

So , without jquery/css we can't achieve this?? I mean can't we do anything inside list attributes for colouring icons??

I didn't mention jQuery. Look at the post that is marked as the correct answer in the linked thread. It is 100% jQuery free.

Even if the Attributes property was applied to the menu entry, color="Blue" would achieve nothing as it is neither HTML nor CSS.

CSS is definitely required as that is the only valid way to define the colour of an element. However, that doesn't mean that you have to add any custom style sheets. The caveat described in the linked thread relating to UT modifier classes no longer applies:

In fact this approach should be possible without the use of an additional style sheet by specifying pre-defined Universal Theme status modifier classes. This however doesn't work due to an apparent bug as the colour modifier classes are missing the aforementioned !important directive.

In 18.1, the colour properties defined for these classes are marked as !important, so they can be used declaratively in the list Image/Class settings:

fa-paragraph u-color-1-text

which will produce (in this case) a blue icon.

Marked as Answer by Navyanishi · Sep 27 2020

2 people found this helpful

Navyanishi

ok Thanks

Melody S

Hello there,

This post has been very helpful to me, thank you so much!

Perhaps you can help me a bit further. I am encountering an issue with the background not rendering in the way I imagined.

This is the code in the list entry...

But it returns a funky shape instead of the full circular background fill...

Any clues?

Thank you for the help in advance!

Melody S

Hey,

I figured it out. I had used a media list.

I turned on Apply Theme Colors and achieved the desired result.

Hope this helps someone!

1 person found this helpful

1 - 8

Added on Oct 9 2018

#apex-discussions

8 comments

8,157 views

APEX

How to change font-awesome icon color in navigation menu list -Apex 18.1

Comments

Post Details