There are different ways to achieve that.

1. I think this is the main thing that is confusing you Doug:
The option in "link type options" has no effect when you are using RokNav.
It wil be ignored. Instead of that look into "Fusion Menu Options" > "Menu image"
That is the one Roknav will use.

2. personally I don't use that option. That image is added as an <img>-tag.
Without an proper alt tag that is rather useless for SEO. (tho there is away around that:
www.rockettheme.com/forum/index.php?f=39..._v=viewtopic#p739214 )

But this option is also not really that great because you wont have a "hover"-change.
So I vote for a CSS only solution using a standard image-replacement technique.

When you look the code of the menu you will see that each item has a unique class.
Just as an example I take that "Events Calendar" on your site.
The unique number is ".item314"

Now I build my specific css-rule for this:

ul.menutop li.item314 > .item span {
background: url( www.bhssa.ca/images/bookface.png ) no-repeat 0 10px;
width: 210px;
text-indent: -9999px;
}

When you add this to your template.css and clear your cache the "Events Calendar"-item will be replaced with your (quite big) Facebook button.

So I suggest to add a new menu-item of the type "external link" and do the same for that what I did for "Events Calendar".

instead of the automatically created unique class you can add also a custom class via
"Custom CSS Class" that you find in the "Fusion Menu Options". You could use a class like "myfacebookbutton" and the css would look like this

ul.menutop li.myfacebookbutton > .item span {
background: url( www.bhssa.ca/images/bookface.png ) no-repeat 0 10px;
width: 210px;
text-indent: -9999px;
}

Sadly this wont work when you are using the split-menu-option ...