- Compatible XF 1.x versions
- 1.0
- 1.1
- 1.2
- 1.3
- 1.4
- 1.5
- Additional requirements
- Make sure you download the pack that is included in this resource.
This is the up-to-date version on how to use font-awesome icons as node icons. Hope it's alright that I've taken this over since the other resource located here is unmaintained. I needed this recently so I felt it was important to keep it updated. Saves time for people like me whom still wanted this. The old unmaintained version did not have the latest icons in the pack. I'll keep the icons up to date.
Find this in node_list.css and then delete it:
Great, you've pretty much done the hard bit. If you made a mistake just revert the template and try again.
Next is going to your EXTRA.css and adding this depending on the type of node you are editing.
Add this code before you do anything else. Do not delete anything else located in EXTRA.css just add it to the bottom under everything.
Now! To get changing!
For normal nodes use this code and change the number value in both .node sections to the node that you'd like to change. This includes pages.
For links use this code:
You can find all the icons at Font Awesome Icons and change the "content" value to the unicode of the icon you want. (you can find this by clicking the icon)
Need additional support? PM me. I'll even do it for you if I've got time. No charge, and I don't want donations at all. Credit to the original maintainer.
- Upload all files to your forum directory.
Find this in node_list.css and then delete it:
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";
}Great, you've pretty much done the hard bit. If you made a mistake just revert the template and try again.
Next is going to your EXTRA.css and adding this depending on the type of node you are editing.
Add this code before you do anything else. Do not delete anything else located in EXTRA.css just add it to the bottom under everything.
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 */Now! To get changing!
For normal nodes use this code and change the number value in both .node sections to the node that you'd like to change. This includes pages.
Code:
.node.node_51 .pageNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}For links use this code:
Code:
.node.node_51 .linkNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}You can find all the icons at Font Awesome Icons and change the "content" value to the unicode of the icon you want. (you can find this by clicking the icon)
Need additional support? PM me. I'll even do it for you if I've got time. No charge, and I don't want donations at all. Credit to the original maintainer.
