H tags in Switcher stack title?

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?


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?

.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,
.openIcon {display:inline-block;}

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;}

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.