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

Unmaintained Font Awesome Icons as Individual Node Icons 1.0.2

The most "Awesome" guide around! ;)

  1. Matthew Hawley

    Matthew Hawley Well-Known Member

    Matthew Hawley submitted a new resource:

    Font Awesome Icons as Individual Node Icons - The most "Awesome" guide around!

    Read more about this resource...
     
  2. Matthew Hawley

    Matthew Hawley Well-Known Member

  3. Matthew Hawley

    Matthew Hawley Well-Known Member

  4. Adam Howard

    Adam Howard Well-Known Member

    Without having to add it 1 by 1 for each node

    PHP:
    .node .forumNodeInfo .nodeIcon:after, .node .categoryForumNodeInfo .nodeIcon:after
    {
    font-family"FontAwesome";
    font-size34px;
    content"\f0e6";
    padding4px;
    }

    .
    node .forumNodeInfo.unread .nodeIcon:after, .node .categoryForumNodeInfo.unread .nodeIcon:after
    {
    font-family"FontAwesome";
    font-size34px;
    content"\f0e6";
    padding4px;
    }
    This seems to work
     
  5. Adam Howard

    Adam Howard Well-Known Member

    And since every style is different.... The code you actually want to comment out is

    PHP:
    .node .forumNodeInfo .nodeIcon,
       .
    node .categoryForumNodeInfo .nodeIcon
       
    {
         @
    nodeIconForum
       
    }

       .
    node .forumNodeInfo.unread .nodeIcon,
       .
    node .categoryForumNodeInfo.unread .nodeIcon
       
    {
         @
    nodeIconForumUnread
       
    }

       .
    node .pageNodeInfo .nodeIcon
       
    {
         @
    nodeIconPage
       
    }

       .
    node .linkNodeInfo .nodeIcon
       
    {
         @
    nodeIconLink
       
    }
    In css to comment out this use this to wrap around it

    PHP:
    /*  */
    For example mine looks like this

    PHP:
    /* Removes sprite icons */
    /*
       .node .forumNodeInfo .nodeIcon,
       .node .categoryForumNodeInfo .nodeIcon
       {
         @nodeIconForum
       }

       .node .forumNodeInfo.unread .nodeIcon,
       .node .categoryForumNodeInfo.unread .nodeIcon
       {
         @nodeIconForumUnread
       }

       .node .pageNodeInfo .nodeIcon
       {
         @nodeIconPage
       }

       .node .linkNodeInfo .nodeIcon
       {
         @nodeIconLink
       }
    */
    /* END Removes sprite icons */
     
  6. Adam Howard

    Adam Howard Well-Known Member

    Same goes for pages and node links. You do not need to label this for each node 1 by 1, but rather can do it universally

    pages
    PHP:
    .node .pageNodeInfo .nodeIcon:after
    {
      
    font-family"FontAwesome";
      
    font-size34px;
      
    content"\f0e6";
      
    padding4px;
    }
    link nodes
    PHP:
    .node .linkNodeInfo .nodeIcon:after
    {
      
    font-family"FontAwesome";
      
    font-size34px;
      
    content"\f0e6";
      
    padding4px;
    }
    Who's awesome? :D
     
  7. Andy.N

    Andy.N Well-Known Member

    Does this work for nodes with read/unread posts?
     
  8. Adam Howard

    Adam Howard Well-Known Member

    Yes, but he forgot to change the font for it.

    In the unread us this as an icon

    \f086
     
  9. Adam Howard

    Adam Howard Well-Known Member

    To clarify you want it to look like this when done

    PHP:
    .node .forumNodeInfo .nodeIcon:after, .node .categoryForumNodeInfo .nodeIcon:after
    {
    font-family"FontAwesome";
    font-size34px;
    content"\f0e6";
    padding4px;
    }

    .
    node .forumNodeInfo.unread .nodeIcon:after, .node .categoryForumNodeInfo.unread .nodeIcon:after
    {
    font-family"FontAwesome";
    font-size34px;
    content"\f086";
    padding4px;
    }
     
    Noobstradamus and Shelley like this.
  10. Adam Howard

    Adam Howard Well-Known Member

    Shelley likes this.
  11. Noobstradamus

    Noobstradamus Member

    @Adam Howard thanks for fixing up some of the code, works and looks perfect!!!
     
    Adam Howard likes this.
  12. Daniel-SP

    Daniel-SP Active Member

    @Adam Howard is that possible to place a specific icon for each node ?

    Thanks
     
  13. Adam Howard

    Adam Howard Well-Known Member

    YES. In my steps you'll have 1 icon for all nodes, but if you want each node to have it's own icon (different from the rest)

    Just change the node ID number in this value and add it to extra.css (repeat as needed)

    PHP:
    .node.node_51 .forumNodeInfo .nodeIcon:after, .node.node_51 .categoryForumNodeInfo .nodeIcon:after
    {
        
    font-family"FontAwesome";
        
    font-size34px;
        
    content"\f0e6";
        
    padding4px;
    }
     
  14. hterrag

    hterrag Active Member

    How can we create our own custom FontAwesome icons?
     
  15. Sami Jalal

    Sami Jalal Well-Known Member

    It does not work!
     
  16. upnet

    upnet Active Member

    This works great for me. I replaced 20 node icons with font-awesome. However I have a set of sub-forums for ctiies where I want those nodes to all be the same icon. Is there some way to create a default icon or an array for those nodes? There are nearly 50, so to put in the .node code for all 50 seems redundant.
     

Share This Page