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

XF 1.3 Custom node icons using FontAwesome?

Discussion in 'Styling and Customization Questions' started by RoldanLT, May 27, 2014.

  1. RoldanLT

    RoldanLT Well-Known Member

  2. Sheldon

    Sheldon Well-Known Member

    I've done it...

    It's been a while since I have done it. Gimme a bit and I'll get back to you.
     
    RoldanLT likes this.
  3. RoldanLT

    RoldanLT Well-Known Member

    Great news, Thanks a lot! (y)
     
  4. RoldanLT

    RoldanLT Well-Known Member

  5. Russ

    Russ Well-Known Member

    You'll need to customize this but it's a start at least in the right direction :)

    Screenshot_3.png

    Code:
    .node .forumNodeInfo .nodeIcon:before
    {
       display: inline-block;
       font-family: FontAwesome;
       color: @primaryDarker;
        font-size: 40px;
       line-height: 38px;
    }
    .node_2 .forumNodeInfo .nodeIcon:before
    {
       content: "\f0cc";
    }
    .node_3 .forumNodeInfo .nodeIcon:before
    {
       content: "\f121";
    }
    .node_4 .forumNodeInfo .nodeIcon:before
    {
       content: "\f024";
    }
    .Responsive .node .nodeIcon
    {
       background-image: none !important;
    }
    
     
    maszd, IPF and RoldanLT like this.
  6. Andy.N

    Andy.N Well-Known Member

    Can we differentiate between nodes that have unread messages and those without?
     
  7. Russ

    Russ Well-Known Member

    Where there's:

    .forumNodeInfo

    just add:

    .forumNodeInfo.unread
     
    RoldanLT likes this.
  8. RoldanLT

    RoldanLT Well-Known Member

    Doesn't need this CSS?
     
  9. Russ

    Russ Well-Known Member

    Probably better off just adjusting the margin-top on nodeicon.

    And as mentioned: You'll need to customize this but it's a start at least in the right direction :)
     
    RoldanLT likes this.
  10. RoldanLT

    RoldanLT Well-Known Member

    Yes I have to add this :)
    .node .nodeIcon { margin: 0px 0px 0px 10px !important; }
     

Share This Page