Icons in line in a Text Block?

Hi,
How can I get an Icon to apear inline where I put the short code?

I have:
<span class="event_details_header_date">NOW – MAY 27</span> <span class="event_details_header_theatre">STAGE THEATRE</span> <span class="event_details_header_map"><a href="/plan-your-visit/theatres-seating/the-stage-theatre/">[av_font_icon icon='ue842' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='right' color='' av_uid='av-s61pm3' custom_class='' admin_preview_bg=''][/av_font_icon] MAP</a></span>

I have some css to fix it:

.event_details_header_map .av_font_icon {
    display: inline;
    float: none;
}

Is this best practice?
Putting an inline option in the icon position drop downs in the WYSIWYG would be helpful.

Thanks!