- Compatible XF 1.x versions
- 1.0
- 1.1
- 1.2
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. Or remove only pages if you don't want to use the Font Awesome icons for others and vice versa.
3. Go to EXTRA.css and add this:
Replace the "51" with your node ID. You can also add/change the CSS to suit your needs.
Also, the "/f0e6" is the CSS code for the font awesome icon. Click the link at the top of this resource to find the codes for all the icons.
Here is the CSS for page and link node icons.
Pages:
Links:
So, thats it! All you need to add individual icons for nodes.
Please like and rate if you like this resource!
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. Or remove only pages if you don't want to use the Font Awesome icons for others and vice versa.
Code:
.node .forumNodeInfo .nodeIcon,
.node .categoryForumNodeInfo .nodeIcon
{
@property "nodeIconForum";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: 0 0;
@property "/nodeIconForum";
}
.node .forumNodeInfo.unread .nodeIcon,
.node .categoryForumNodeInfo.unread .nodeIcon
{
@property "nodeIconForumUnread";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: -36px 0;
@property "/nodeIconForumUnread";
}
.node .pageNodeInfo .nodeIcon
{
@property "nodeIconPage";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: -72px 0;
@property "/nodeIconPage";
}
.node .linkNodeInfo .nodeIcon
{
@property "nodeIconLink";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: -108px 0;
@property "/nodeIconLink";
}3. Go to EXTRA.css and add this:
Code:
/* FONT AWESOME NODE ICONS */
@font-face
{
font-family: 'FontAwesome';
src: url('./styles/default/xenforo/fonts/fontawesome-webfont.eot');
src: url('./styles/default/xenforo/fonts/fontawesome-webfont.ttf') format("truetype"),
url('./styles/default/xenforo/fonts/fontawesome-webfont.woff') format('woff'),
url('./styles/default/xenforo/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('./styles/default/xenforo/fonts/fontawesome-webfont.svg#fontawesome-webfont') format('svg');
font-style: normal;
font-weight: normal;
}
.node.node_51 .forumNodeInfo .nodeIcon:after, .node.node_51 .categoryForumNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}
.node.node_51 .forumNodeInfo.unread .nodeIcon:after, .node.node_51 .categoryForumNodeInfo.unread .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}
/* FONT AWESOME NODE ICONS */Replace the "51" with your node ID. You can also add/change the CSS to suit your needs.
Also, the "/f0e6" is the CSS code for the font awesome icon. Click the link at the top of this resource to find the codes for all the icons.
Here is the CSS for page and link node icons.
Pages:
Code:
.node.node_51 .pageNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}Links:
Code:
.node.node_51 .linkNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}So, thats it! All you need to add individual icons for nodes.
Please like and rate if you like this resource!
Please consider a donation.
![[RM] Add Page Navigation Above Resource List](/community/data/resource_icons/2/2840.jpg?1391659649){kind=icon}
