shortcodes ultimate: a link + icon inside 'note' - how?

I want to use Shortcodes Ultimate plugin (for WordPress) to replace an image on the page that contains a link.

Specifically Using SU, I would like to ...

1. Use the 'note' option


2. Color the background red


3. Use font-awesome icon of edit


4. Style the font-awesome icon white


5. Make the title of the note "Book Barry" linked to another page on the site


6. Style the title of "Book Barry" white (#fff)


7. Make the title/link have hover attributes

examples are here on this mock page. So far, I've been able to get items #1 - #5 with the help of someone on the plugin support page.

On the mock page, the 1st red "book barry" box is the image. This is what to replace.

Red boxes 2, 3, 4, 5 are my attempts to make the red box using SU. #5 is the closest I've come.

Here's the code on the actual page relating to box #5:

• < a title="Book a Public Speaker" href="http://ift.tt/1zm3URU"> [su_note note_color="#c1122f" color="#fff"][su_service icon="icon: edit" size="63" title="Book Barry" class="book-barry2" title_color="#fff" icon_color="#fff" color="#fff][/su_service][/su_note] < / a>

When I add in styling for the class book-barry2 on my style sheet, it doesn't get picked up.

Can anyone spot what I'm missing? Thanks!