• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
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
#1
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...
 

Adam Howard

Well-known member
#4
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
 

Adam Howard

Well-known member
#5
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 */
 

Adam Howard

Well-known member
#6
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
 

Adam Howard

Well-known member
#9
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

Well-known member
#13
@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;
}
 

Sami Jalal

Well-known member
#15
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!
 

upnet

Active member
#16
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.