Skip to content

Magic social icons with CSS

Screenshot of a social icon selected with CSS
Social icons selected via CSS

This is a simple trick for automatically displaying icons (such as social icons) without any script. Using a CSS wildcard selector, we check the href of our link and display a pseudo-element with matching content.

a[href*="github.com"]::before {
 content: "\f113";
}

The above example uses a Font-Awesome glyph as content, but this could easily be replace with an image: content: url(/path/image.svg). Any subsequent link matching our selector would display our pseudo-element.

A demo of this technique can be found here on CodePen.

Dev notes

Be careful with your selectors. You could end up accidentally styling links that have been entered into a user-editable field (such as a CMS)… unless that’s what you really want. Wildcard selectors require the browser to do extra work, so you should use sparingly.

Leave a Reply

Your email address will not be published. Required fields are marked *