Best way to add fontawesome icon to mod bar?

[RobParker]

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

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

This is the template:

  <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

xenhrase StaffRoomUnread_AdminRoom}

to

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

But that doens't work and messes stuff up.

Any ideas?

 

[Russ]

Try without the fa-lg, can you post a screenshot once you try that.

 

[RobParker]

I wasn't closing the <i> tag

 

[Russ]

Hah missed that too

 

[RobParker]

Got them all added fine now.

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

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

Got them all added fine now.

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

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

class="modLink xbTooltipBottom"

This might change in the future... we're not happy with XF default tooltips.

 

[RobParker]

Excellent, cheers.

I missed that as it was inside the xenif statement.

All working now

 

[Steve]

You also have to add

data-tooltip="{xenhrase phrase}"

In the HTML

Edit: or maybe not

 

[RobParker]

You also have to add

data-tooltip="{xenhrase phrase}"

In the HTML

Edit: or maybe not

I hardcoded it :-(

data-tooltip="Staff Room"

 

[Steve]

I hardcoded it :-(

data-tooltip="Staff Room"

That's ok since you aren't making it to release to public , I do the same sometimes.

 

[Steve]

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]

We've only just updated from 1.2 to 1.4. I don't want any talk of 2.0 for at least 6 months

 

[Steve]

Heh...also there is a setting in Xenbase for FA icons in the mod bar, for the default links of course.

 

[RobParker]

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.

 

[Steve]

http://weloveiconfonts.com

Not sure of how to use the others but there are some good ones there.

 

[RobParker]

Ooh that looks exactly like what I want.

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

e.g.

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

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

 

[Steve]

Looks ok..try it out