XF 1.5 Interesting Font Awesome Behavior

[Brad Padgett]

So I recently tried Font Awesome for some profile drop down navigation and also profile tabs.

I used this in the head of Page Container. Very outdated but it worked:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

I wanted to use the latest version so I tried using the new max cdn font awesome reference such as below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

But there was one problem, the new one doesn't work.

So I'm thinking, well this is interesting. The old one works but this new one doesn't.

After this I pretty much gave up on using a newer version. Apparently you are supposed to reference the font awesome font family for it to work but it never did. Even trying the add-on "font awesome switch" didn't work. I even tried referencing the font awesome and using it directly by uploading all the font awesome folders and this didn't work when referencing it in the page container right after the head.

Are there any tips for you guys about the way to initiate font awesome without issue?

I seem to run into trouble every time. I'd rather not use this old version in the future if I can help it.

The templates I had to edit for it were member_view and navigation_visitor_tab

So I can't reference font-awesome in those templates and I'm not sure how to reference them in extra.css since page container doesn't work.

Any help?

 

[Matthew S]

I have no idea how to use the latest FA set, but I'm using the FA Switch add-on in 1.5 without issue. I reference an icon in EXTRA.css like this:

.node_11 .nodeIcon .fa-comments:before { content: "\f0f4"; }
html .redactor_toolbar li a.redactor_btn_custom_justify:before {content: "\f039";}

 

[Brad Padgett]

I have no idea how to use the latest FA set, but I'm using the FA Switch add-on in 1.5 without issue. I reference an icon in EXTRA.css like this:

.node_11 .nodeIcon .fa-comments:before { content: "\f0f4"; }
html .redactor_toolbar li a.redactor_btn_custom_justify:before {content: "\f039";}

Yeah I couldn't get it to work. From what I understand it's not even required if you can reference the font-family. But I could never figure out how to do it for the 2 areas I needed to use it on.

I was trying to change the profile tab icons and also the profile drop-down navigation icons.

Since I have to edit the templates directly, I'm not sure how to use it in extra.css

I installed the font-awesome switch and it didn't work since it was directly in the template. If anyone has some ideas let me know.