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

XF 1.4 Prefix

Discussion in 'Styling and Customization Questions' started by Ernest L. Defoe, Nov 2, 2014.

  1. Ernest L. Defoe

    Ernest L. Defoe Well-Known Member

    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;
    }
     
  2. tajhay

    tajhay Well-Known Member

    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.
     
  3. Ernest L. Defoe

    Ernest L. Defoe Well-Known Member

    Not working. I've already tried that.
     
  4. tajhay

    tajhay Well-Known Member

    .prefixSuggestion {
    background-color: #(hex code here);
    }
     
  5. Ernest L. Defoe

    Ernest L. Defoe Well-Known Member

    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.
     
  6. tajhay

    tajhay Well-Known Member

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

    Ernest L. Defoe Well-Known Member

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

    Ernest L. Defoe Well-Known Member

    @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.
     
  9. tajhay

    tajhay Well-Known Member

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

Share This Page