Update interaction links markup to accommodate font icons.

[populationtwo]

I made some modification to the interaction links to a accommodate font icons.

Cheers

[jasonmayes]

Can you elaborate what this does? Does the user need to add CSS for this to show the icons?

[populationtwo]

Basically wrapping the interaction text with <span> and adding <i> tag. That will allow user to style the interaction link with font icon.

With the current markup it's impossible to display the icons (withouth text) using font icons. The only way to display the icons is by displaying the text as well, since hiding the text will hiding the icons as well. http://codepen.io/populationtwo/details/jBYozW/

With the proposed markup user can display the icons only without text. Or display the text only without icons. http://codepen.io/populationtwo/pen/VpyOBE

And yes, use need to add their own CSS to show the icons.

Let me know if you have any questions.

[jasonmayes]

Could you not use the following CSS to hide the text but keep the background image?

.interact span { text-indent: -1000px; overflow: hidden; background-image: url('../path/to/icon.png'); }

?

[populationtwo]

That only works on image file, it won't work on font-icon. The proposed PR will allow both font icon and image file.

[cho9e]

I managed to use font icons pretty easily with CSS? p.interact a { visibility: hidden; position: relative; width: 11px; height: 11px; overflow: hidden; display: inline-block; margin-right: 2px; } p.interact a:after { visibility: visible; display: block; position: absolute; left:0; top:0; font-family: untitled-font-1!important; font-style: normal; font-weight: 400; speak: none; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; vertical-align: middle; line-height: 1em; font-size: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p.interact a:first-of-type:after {content: '\e092';} p.interact a:nth-of-type(2):after {content: '\e02d';} p.interact a:nth-of-type(3):after {content: '\e06e';}