improve User Guide icon

[michaelchadwick]

Fixes ilios/ilios#5609

My attempt to address all the issues:

• Color scheme made consistent
• Icon shape made consistent
• Question mark uses the same base font as all other Fontawesome icons, so...maybe not fixable?
• Large screen icon alignment fixed

To do this, I had to go from using an <a> (which I chose since the icon takes you somewhere instead of just doing something) to using a <button> (which all the other elements use, giving it a lot of the same existing CSS properties) and adding a component class to model the "click this to open a new window/tab" action

[jrjohnson]

I agree this should be a link. I'd rather keep the semantically correct HTML, but if that isn't possible I'll accept it. Take a look at the ilios-link-button mixin though, it may help.

[michaelchadwick]

I'll take another crack at this to keep the semantic <a>-ness of it, but I wanted to get it out there for others to look at for visual and functional reasons.

[michaelchadwick]

Changed back from <button> to <a> so semantic again. Had to fudge some CSS here and there, but I think it is both a bit smaller and a more distant from the other icons.

[jrjohnson]

Excellent. Looks great to me.

[saschaben]

please if we are able: align center vertically, rather than align-bottom viz the other icons; add 2px padding on right, since when vertical scroll appears, it overlays the right edge of the icon.

otherwise, all A-OK

[michaelchadwick]

@saschaben Thanks for the feedback. Will hammer it out some more soon.

[michaelchadwick]

@saschaben Made some adjustments. Let me know if this works better!

[jrjohnson]

Excellent