Font Awesome Icons as Individual Node Icons 1.0.2

[Matthew Hawley]

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.

View attachment 59377

Here are the CSS codes for the Font Awesome 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...

 

[Matthew Hawley]

Matthew Hawley updated Font Awesome Icons as Individual Node Icons with a new update entry:

Update 1.1.0

Fixed an error with one of the @font-face URLS.

Read the rest of this update entry...

 

[Matthew Hawley]

Matthew Hawley updated Font Awesome Icons as Individual Node Icons with a new update entry:

Update 1.0.2

Removed unnecessary tags.

Read the rest of this update entry...

 

[Adam Howard]

Without having to add it 1 by 1 for each node

.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

 

[Adam Howard]

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

.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

/*  */

For example mine looks like this

/* 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 */

 

[Adam Howard]

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

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

link nodes

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

Who's awesome?

 

[Andy.N]

Does this work for nodes with read/unread posts?

 

[Adam Howard]

Does this work for nodes with read/unread posts?

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

In the unread us this as an icon

\f086

 

[Adam Howard]

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

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

You can replace the node icons with anything on this list
http://astronautweb.co/snippet/font-awesome/

 

[Noobstradamus]

@Adam Howard thanks for fixing up some of the code, works and looks perfect!!!

 

[Daniel-SP]

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

Thanks

 

[Adam Howard]

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

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

 

[hterrag]

How can we create our own custom FontAwesome icons?

 

[Sami Jalal]

Without having to add it 1 by 1 for each node

.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!

 

[upnet]

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.