Adjust vertical alignment of social media icons

[bberndt-uaz]

Problem/Motivation

The social media icons appear slightly misaligned next to their accompanying text.

Describe the bug

Currently, the bottom of the social media icons is not quite aligned with the baseline of the accompanying text (e.g., "Facebook"). See the screenshot below from arizona.edu. Since the icons have a larger height than the text, I believe it would be best to vertically align the center of the icons with the middle of the text.

To Reproduce

Steps to reproduce the behavior:

1. Enable the Menu Link Attributes module
2. Add some social media links to the Footer - Social Media menu, adding the necessary classes to the attributes section (e.g., "az-icon-facebook az-icon-spacing" for Facebook)
3. Look in the footer to confirm that the icons appear misaligned

Proposed resolution

Adjust the CSS for the icons so they are vertically aligned with the middle of the text.

Expected behavior

Icons are vertically aligned with the middle of the text. See screenshot below from arizona.edu.

Screenshots

Current icons on arizona.edu:

After adjustment:

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome, Safari
• Version: Chrome 100, Safari 15.4

Smartphone (please complete the following information):

• Device: Galaxy S9
• OS: Android 10
• Browser: Chrome
• Version: 100