Discussion on: How to Create Social Media Icon with Hover Animation Using HTML and CSS Only.

This is using a font, so it is not HTML and CSS only. Perhaps just adjust the title so it isn't misleading (as I am sure that isn't the intention!)

Also the text within the icons (in the span) should be .sr-only (.visually-hidden) rather than opacity: 0 so that people who use a screen reader can access the text, as some screen readers don't announce opacity: 0.

Visually Hidden class that is bullet proof

Use the following instead of opacity: 0 for items that are important to people who use a screen reader but you don't want to appear visually:

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

As a final point on accessibility, if these are leading to social media profiles etc. then an anchor (<a>) is the correct containing element with the relevant href.