Ergo icon indicating copy to clipboard operation
Ergo copied to clipboard

Social media icons are not clickable

Open ebkalderon opened this issue 4 years ago • 2 comments

When users navigate through sites using this theme, both the eye is naturally drawn to the icons in the social media buttons and people may intuitively attempt to click the icon. However, the icon itself isn't clickable, only the text. A really tiny change which would go a long way in terms of usability would be to make the entire social media button (both the text and icon) clickable.

ebkalderon avatar Jan 19 '20 15:01 ebkalderon

Wrapping the existing <i> tag with the existing <a> tag in the social_list macro appears to do the trick in terms of getting the entire button to be clickable, but unfortunately, the light grey color of the icon gets replaced with the black color of the text and the padding between the button text and the icon is lost. Hopefully there exists a nicer way to do this.

ebkalderon avatar Jan 20 '20 09:01 ebkalderon

this should work,

the culprit is in the CSS, probably starting here: https://github.com/insipx/Ergo/blob/f5e265da1ced040941100235b8a1090fa41e415d/sass/_macros.scss#L42

the > i will not longer apply since the i would be nested under the <a>

I guess that this won't fix the padding error, but that could probably be fixed with a minor css change too

insipx avatar Jan 20 '20 10:01 insipx

Hmm. Worked in my own testing, but since being merged and deployed to my personal site they're still not clickable...

Reopening to take another look at this.

PriceChild avatar Jul 14 '23 17:07 PriceChild

Bah, my local pipeline was failing. Everything looks good including the demo site listed in the README.

Closing!

PriceChild avatar Jul 17 '23 16:07 PriceChild