• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Prefix

Ernest L. Defoe

Well-known member
#1
I am using this code posted by @Sheldon on another site but I am wanting to add a color background around the icon and text. How would I achieve that?

This is the current code:
.prefixSuggestion:before {
content: "\f01c";
font-family: FontAwesome;
padding-right: 4px;
}
 

tajhay

Well-known member
#2
background-color: #(hex code here);

p.s If in doubt you should always try to google and check on there first and try things out.
 

Ernest L. Defoe

Well-known member
#5
That only put the color behind the FA icon. This is the code as it stands right now. This is what puts the color behind the FA icon and nothing else.

.prefixNews:before {
background-color: #ee2f2f;
content: "\f1ea";
font-family: FontAwesome;
padding-right: 4px;
}

Screen Shot 2014-11-01 at 9.56.30 PM.png

I need to to also include the word in this case News as well.
 

Ernest L. Defoe

Well-known member
#8
@tajhay I got it sorted. I had to do a work around to be able to keep the FA icon and do the coloring. Basically each prefix calls for two different css codes. One for the color and one for the icon. Thankfully I am not going to be using alot of prefixes or it could get confusing.
 

tajhay

Well-known member
#9
@tajhay I got it sorted. I had to do a work around to be able to keep the FA icon and do the coloring. Basically each prefix calls for two different css codes. One for the color and one for the icon. Thankfully I am not going to be using alot of prefixes or it could get confusing.
yes i know. i was on mobile when trying to help....note the suggestion i gave you...it didnt have the before selector part...The icon is done with a before selector. The prefix name maintains the attributes for the entire element.

.prefixSuggestion (NO :BEFORE SELECTOR) {
background-color: #(hex code here);
}