Font Awesome Icons as Individual Node Icons

Font Awesome Icons as Individual Node Icons 1.0.2

No permission to download

Matthew Hawley

Well-known member
Matthew Hawley submitted a new resource:

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

So in this guide I will be showing how to use FontAwesome as Individual Node Icons.


1. Download the FontAwesomeFonts zip file, extract it, and upload to the root folder in your FTP.

2. Go to node_list.css and remove

Note: Don't remove the pages or link icons if you only want to use the icons for nodes....

Read more about this resource...
 
Without having to add it 1 by 1 for each node

PHP:
.node .forumNodeInfo .nodeIcon:after, .node .categoryForumNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}

.node .forumNodeInfo.unread .nodeIcon:after, .node .categoryForumNodeInfo.unread .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}

This seems to work
 
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 */
 
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-size: 34px;
  content: "\f0e6";
  padding: 4px;
}

link nodes
PHP:
.node .linkNodeInfo .nodeIcon:after
{
  font-family: "FontAwesome";
  font-size: 34px;
  content: "\f0e6";
  padding: 4px;
}

Who's awesome? :D
 
Yes, but he forgot to change the font for it.

In the unread us this as an icon

\f086

To clarify you want it to look like this when done

PHP:
.node .forumNodeInfo .nodeIcon:after, .node .categoryForumNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}

.node .forumNodeInfo.unread .nodeIcon:after, .node .categoryForumNodeInfo.unread .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f086";
padding: 4px;
}
 
@Adam Howard is that possible to place a specific icon for each node ?

Thanks
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-size: 34px;
    content: "\f0e6";
    padding: 4px;
}
 
Without having to add it 1 by 1 for each node

PHP:
.node .forumNodeInfo .nodeIcon:after, .node .categoryForumNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}

.node .forumNodeInfo.unread .nodeIcon:after, .node .categoryForumNodeInfo.unread .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}

This seems to work

It does not work!
 
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.
 
Top Bottom