XF 1.x Best way to add fontawesome icon to mod bar?

RobParker

Customer
We use the staffroom unread addon to add some extra stuff into our modbar

Screen Shot 2014-10-08 at 12.20.34.png


I'd like to change "Staff" to use a fontawesome icon instead.

This is the template:

Code:
  <a href="{xen:link 'forums/{$forumID}'}" class="modLink">
  <span class="itemLabel">{xen:phrase StaffRoomUnread_AdminRoom}</span>
  <span class="itemCount {xen:if {$messageCount}, 'alert'}"> {$messageCount}</span>
  </a>
I thought I could just change

xen:phrase StaffRoomUnread_AdminRoom}

to

<i class="fa fa-user fa-lg">

But that doens't work and messes stuff up.

Any ideas?
 

RobParker

Customer
Got them all added fine now.

I'm just trying to add a tooltip to them but I'm doing something wrong:

Code:
  <a href="{xen:link 'forums/{$forumID}'}" class="modLink" data-tooltip="Staff Room">
  <span class="itemLabel"><i class="fa fa-users fa-lg"></i></span>
  <span class="itemCount {xen:if {$messageCount}, 'alert'}"> {$messageCount}</span>
  </a>
Any idea why that doesn't work?
 

Russ

Pixel Exit Staff
Got them all added fine now.

I'm just trying to add a tooltip to them but I'm doing something wrong:

Code:
  <a href="{xen:link 'forums/{$forumID}'}" class="modLink" data-tooltip="Staff Room">
  <span class="itemLabel"><i class="fa fa-users fa-lg"></i></span>
  <span class="itemCount {xen:if {$messageCount}, 'alert'}"> {$messageCount}</span>
  </a>
Any idea why that doesn't work?
Add a ToolTip class next to it.

Currently in the moderator bar we use our own setup:

Code:
class="modLink xbTooltipBottom"
This might change in the future... we're not happy with XF default tooltips.
 

Steve

Pixel Exit Staff
You also have to add

data-tooltip="{xen:phrase phrase}"

In the HTML

Edit: or maybe not :p
 

Steve

Pixel Exit Staff
Just to add the xbTooltip thing is something I have been messing with, I hope to have some kind of system ready for XF 2.0 for our framework, but only time will tell with that. But it is a nice way to get away from the default behaviors of the default xf tooltip without modifying core files.
 

RobParker

Customer
Yep, spotted that.

Is there anything else like FA? They don't really have a good icon for a few of our links and I wondered if there was anything similar that might have different choices that'd also work.

I vaguely recall the FA guy having a new project.
 

RobParker

Customer
Ooh that looks exactly like what I want.

Is it ok to place this in extra.css or is there somewhere better?

e.g.
Code:
@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.