Contact widget: improve alignment of icons with labels

[FramboisePi]

Hello, I noticed that the texts and the icons are not aligned in contact widget.

In my opinion it would be better if the images and texts were aligned.

I could improve this situation by overwriting academic.css and changing value top in .contact-widget and .fa-li classes but it is not really a good solution.

.contact-widget .fa-li {
    top: 0.14285714em; /* Default FA value. */
}

Does someone know how to do this?

[gcushen]

Contact icons are vertically top aligned. I believe you are proposing changing the alignment to be vertically centred?

Currently, I do not see any reason to change the alignment for all users of Academic. It can be tailored on individual basis by using CSS plugins - refer to the Academic docs.

---

Note that we have in Academic's style:

.contact-widget .fa-li {
  ...
  top: 0.14285714em; /* Default FA value. */
}

and also in Academicons style:

.ai-li, .fa-li {
  top: .14285714em;
  ...
}

[FramboisePi]

Thank you for your answer. Yes, I meant vertically centred.

It was just a suggestion because we thought it was nicer if the icons were aligned, especially when there is more than one line of text, but it's not difficult to change. Perhaps it could be mention in the documentation. I believe there are user who can not discover how to do this by themselves.

I didn't know .ai-li, .fa-li, thank you, I will try and see want we can do.