• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 FontAwsome/Fontello Node Icons

#1
So I've created some custom fontawesome icons with fontello here's the CSS im trying to use in extra.css to get the node icons to work;

Code:
/* FONT AWESOME NODE ICONS */

@font-face

{

        font-family: 'FontAwesome';

        src: url('./fonts/slick.eot');

        src: url('./fonts/slick.ttf') format("truetype"),

                url('./fonts/slick.woff') format('woff'),

                url('./fonts/slick.eot?#iefix') format('embedded-opentype'),

                url('./fonts/slick.svg#fontawesome-webfont') format('svg');

        font-style: normal;

        font-weight: normal;

}


.node.node_6 .forumNodeInfo .nodeIcon:after, .node.node_6 .categoryForumNodeInfo .nodeIcon:after

{

    font-family: "FontAwesome";

    font-size: 34px;

    content: "icon-lightbulb-alt”;

    padding: 4px;

}


.node.node_44 .forumNodeInfo.unread .nodeIcon:after, .node.node_4 .categoryForumNodeInfo.unread .nodeIcon:after

{

    font-family: "FontAwesome";

    font-size: 34px;

    content: "icon-megaphone";

    padding: 4px;

}


/* FONT AWESOME NODE ICONS */
I'm aware this is wrong and I should be instead applying this tag;

Code:
<i class="fa icon-megaphone"></i>
to replace the node icons the issue is I can't find where the HTML for each individual node icon would be can anyone help me out?
 

TJA

Well-known member
#2
Code:
.node_44 .nodeIcon:before {
    content: "\f0a1";
    font-family: FontAwesome;
    font-size: 34px;
}
upload_2015-5-21_21-34-25.png
If you don't have Font Awesome installed then go to your PAGE_CONTAINER template and add this after <head>
Code:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
#3
Code:
.node_44 .nodeIcon:before {
    content: "\f0a1";
    font-family: FontAwesome;
    font-size: 34px;
}
View attachment 106651
If you don't have Font Awesome installed then go to your PAGE_CONTAINER template and add this after <head>
Code:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Out of curiosity, how do you find the content part("\f0a1") of font awesome icons?
 
Last edited:

rafass

Well-known member
#6
just use "\fxxx" in the css.
example:
Code:
.logged i.fa.fa-user:after {
   font-family: FontAwesome!important;
    content: "\f005"!important;
    position: absolute;
    etc, etc...
}