H tags in Switcher stack title?

[forteweb (Michael Forte)]

I just purchased Switcher to create an Accordion and was wondering how I would go about setting up the titles as h3 tags without messing up all of the margin and padding? I put in the code

<h3><i class='fa fa-compass'></i> Location</h3>
but then it wraps to another line. I just want the title text tagged for SEO purposes.
Can you please point me in the right direction?

FYI, I am using the Foundation theme so I’m guessing a custom CSS would be required for this but how?

Thanks,
Mike

EDIT: After playing with this a bit, I am seeing that the open/close caret icon at the far right is being pushed down because it is not contained within the h3 tag. I need that icon to be within the h3 tag and all will work. Ideas?

[dks035 (Dan Smith)]

h3,
.closedIcon,
.openIcon {display:inline-block;} 

though if you have other h3 elements on the page you may want to limit the influence by changing to something like:

.switcherItem h3,
.closedIcon,
.openIcon {display:inline-block;}

[forteweb (Michael Forte)]

Thanks for the pointer! I ended up enclosing my <i> tags with tags calling a class for the open and closed icons so I had individual control over their placement. The css I used is:

span.icon-open-position {position: absolute; top: -5px; right: 10px;}
span.icon-closed-position {position: absolute; top: -5px; right: 10px;}