Add new link utilities, icon link helper, and update colored link helpers

[mdo]

Fun update for links in Bootstrap with a few new changes across the project...

New .icon-link helper

This allows you to immediately pair any Bootstrap Icon with a hyperlink and have it spaced, aligned, and styled properly. Includes support for icons before or after the text, and includes a basic hover state. There's opportunity for future hover states here, too. Might make more sense as a component?

Color links are now built with CSS variables

Instead of resetting the color property, we reset the --bs-link-color-rgb values. I've also added a new text-decoration-color property to these helpers that defaults to the current link color in rgb form with --bs-link-underline-opacity as the alpha layer (defaulting to 1). This leads me to the next update...

Introducing several new link utilities

To help modify icon links, colored links, and even regular links, we have new .link-opacity-* to change the alpha transparency, .link-offset-* to change the distance of the underline, .link-underline-* to change the underline color, and .link-underline-opacity-*to change the underline alpha transparency. The link opacity and link underline opacity utilities also have a predefined:hover` variant as well.

---

As a result, this also removes some other custom .icon-link instances from the features snippet example and homepage.

Live preview

• https://deploy-preview-37762--twbs-bootstrap.netlify.app/docs/5.3/helpers/icon-link/
• https://deploy-preview-37762--twbs-bootstrap.netlify.app/docs/5.3/utilities/link/

[patrickhlauke]

For the icon links:

• suggest doubling up the "Style on hover" to also apply on focus or :focus-visible
• i'd add a an info/accessibility callout that pretty much replicates what it says on https://icons.getbootstrap.com/#accessibility - and for the examples you have so far, probably safest to add an aria-hidden="true" on the <svg>

[patrickhlauke]

For the link utilities:

• both for underline color and colored links, worth adding the https://getbootstrap.com/docs/5.3/components/buttons/#conveying-meaning-to-assistive-technologies callout
• for link opacity, worth calling out that obviously this will result in contrast ratios that are well below the WCAG minimum

[patrickhlauke]

See accessibility-related comments

[mdo]

All done, thanks @patrickhlauke! Just pushed an update to address all that.