jquery: Update Twitter to x ,add mastodon and replace FontAwesome font with SVG icons

[HermitShamiko]

@timmywil @mgol

1. Twitter was renamed to X in March 2023. This pull aims to update the Twitter account (including icons and links) of the jQuery website to X.
2. Since jQuery uses Font Awesome 3.0.2, which does not include the x-twitter icon and is only supported in the latest 7.x version, I attempted to upgrade jQuery's Font Awesome from 3.0.2 to 7.2.0, and update it from Font Awesome's woff format to Font Awesome's svg format. After upgrading to version 7.2.0, I found that some icons had been removed or their Unicode encoding had changed, so I updated them accordingly.For information on updating Font Awesome to SVG icons, see reference Replace FontAwesome font with SVG icons #455.
3. Based on suggestion jquery: Update Twitter to x #488, jQuery's mastodon has been added to the footer's footer-site-links.

The updated icon style is as follows:
footer(new):

footer(old):

learn(new):

learn(old):

[timmywil]

Thank you! I noticed in your footer screenshot that the chat icon seems to be cut off a bit at the top. I wonder if the SVG is not actually square. Could you look into that?

[HermitShamiko]

Thank you! I noticed in your footer screenshot that the chat icon seems to be cut off a bit at the top. I wonder if the SVG is not actually square. Could you look into that?

Yes, I found some issues with the viewBox section of comments.svg in version 7.2.0 that caused it to display incompletely. I have manually fixed the malfunctioning viewBox.
It can now be displayed correctly.

[HermitShamiko]

Two new changes:

1. Directly using the content url() to include an SVG would be affected by other line-height properties; this has been changed to use background instead.

new:

old:

2. Optimized the issue of the GitHub icon in the Open Source Content section of learn.jquery.com not being prominent enough; it has been adjusted to have the same effect as the footer.

new:

old:

[timmywil]

Thank you! LGTM

[HermitShamiko]

Thank you! LGTM

Sorry, I just discovered three icons with minor issues; their missing parts were so small that I didn't notice them. I've already fixed them.
Now all SVG icons can display their full size.

old:

new:

[HermitShamiko]

I discovered an old problem and solved it this time: The icon-link next to the heading in the h tag used on website page was not aligned with the heading itself.

new:

old:

[mgol]

Thanks for the PR. These are a lot of changes, so I'd like to spend some time testing them on various websites.

See one comment I added.

[mgol]

Could you also add a duplicate .icon-x class and mark this one as deprecated?

[HermitShamiko]

Okay, I've added the icon-x attribute and declared the old icon-twitter as Deprecated, while also switching it to the old Font Awesome to prevent other pages from referencing this icon, since we haven't removed the old version of the Font Awesome file.