XF 1.4 FontAwsome/Fontello Node Icons

Deleted member 91401 · May 21, 2015

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 · May 21, 2015

Code:

.node_44 .nodeIcon:before {
    content: "\f0a1";
    font-family: FontAwesome;
    font-size: 34px;
}

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">

Deceptive · May 22, 2015

TJA said:
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?

teletubbi · May 22, 2015

On the homepage of font awesome.
There is a sheet with all icons and codes.

Deceptive · May 22, 2015

teletubbi said:
On the homepage of font awesome.
There is a sheet with all icons and codes.

My bad. I couldn't see the small text that said it.

rafass · May 22, 2015

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

Deceptive · May 22, 2015

rafass said:
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... }

What about pages? What would you do?

TJA · May 22, 2015

Demon said:
What about pages? What would you do?

A line from a page

Code:

<i class="fa fa-exclamation-triangle fa-lg"></i> No refunds will be made relating to site donations.<br>

rafass · May 22, 2015

Font Awesome have 519 icons. but we usually use just few of them.
Would be great if there are some way to upload only the icons we need. (locally)
I'm still looking some way to do this here in Xenforo.
https://xenforo.com/community/threads/alternative-to-fontawesome-with-less-icons.94540/

XF 1.4 FontAwsome/Fontello Node Icons

Deleted member 91401

Guest

TJA

Well-known member

Deceptive

Active member

teletubbi

Well-known member

Deceptive

Active member

rafass

Well-known member

Deceptive

Active member

TJA

Well-known member

rafass

Well-known member

Similar threads

We value your privacy