XF 1.4 Prefix

[Ernest L. Defoe]

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]

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]

Not working. I've already tried that.

 

[tajhay]

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

 

[Ernest L. Defoe]

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;
}



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

 

[tajhay]

As I stated in my last post....you need to put the code in a NON :before selector.

 

[Ernest L. Defoe]

As I stated in my last post....you need to put the code in a NON :before selector.

I've already tried all that. When I do it it does away with the FA icon I am trying to use.

 

[Ernest L. Defoe]

@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]

@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);
}