Wildcat Media
Well-known member
This is kind of a different/strange request.
I have a set of CSS rules for thread prefixes that sets them to custom colors depending on the subject. It works well for now, but I want to customize more.
For now I've been using emoji prior to the thread prefixes to make them stand out.
I want to switch those to Font Awesome icons (which I know how to do, thanks to another tutorial here)...but with a twist.
I want to be able to change the color of only the Font Awesome icons. A different color for each prefix, which is set to a brand theme. So I need specific and separate colors for text, icon, and background.
So if I have a prefix theme where I need an orange background with black text, I need the Font Awesome icon to be white. Or for a yellow prefix theme, I need the text in orange and that prefix's Font Awesome icon in green.
I'm guessing I just need the right combination in the css?
Typically it's
I have a set of CSS rules for thread prefixes that sets them to custom colors depending on the subject. It works well for now, but I want to customize more.
For now I've been using emoji prior to the thread prefixes to make them stand out.
I want to switch those to Font Awesome icons (which I know how to do, thanks to another tutorial here)...but with a twist.
I want to be able to change the color of only the Font Awesome icons. A different color for each prefix, which is set to a brand theme. So I need specific and separate colors for text, icon, and background.
So if I have a prefix theme where I need an orange background with black text, I need the Font Awesome icon to be white. Or for a yellow prefix theme, I need the text in orange and that prefix's Font Awesome icon in green.
I'm guessing I just need the right combination in the css?
Typically it's
.label.label--mycustomcolor {background and color stuff here;} . I'm not sure if there is a safe way to color the icon separately with what we are given in XF to work with. I've made a few attempts but haven't had luck yet.
