Customize TwentyTwenty Social Menu icons

The WordPress TwentyTwenty theme is a good starting point for developing new websites. One of the features is TwentyTwenty is that SVG icons are added automatically to social links.

In the theme is a ‘Social Menu’ which already shows the icons.

How does it work?

If the link contains a url pointing to a social network, for example Facebook a[href*=”facebook.com”] than the svg icon for Facebook will be displayed. It is a neat solution.

Which of the Social Network are supported

There is a range of supported icons (see this page for more information on the theme).

  • 500px
  • Amazon
  • Angel
  • audible
  • Behance
  • Codepen
  • Creative Commons
  • DeviantArt
  • Digg
  • Dribbble
  • eBay

  • Etsy
  • Facebook
  • Flickr
  • GitHub
  • GitLab
  • Goodreads
  • Houzz
  • IMDb
  • Instagram
  • Kickstarter
  • JSFiddle
  • LinkedIn
  • Last.fm
  • Medium
  • Meetup
  • Mixcloud
  • Patreon
  • Periscope
  • Pinterest
  • Google Play
  • Google+
  • Product Hunt
  • Quora
  • Reddit
  • Slack
  • SoundCloud
  • Spotify
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

Unfortunately … this list lacks a few icons like “Whatsapp” or “TikTok”. I wanted to add these and found some non-standard ways to do this. There are some requests at WordPress to make our life easier: some people asked for specific icons to add and better: there is a request to add a filter to add svg icons to the list.

In the meantime I hope the following information helps others:

Add addtional icon via CSS

There is no icon for a phone button so you can add it the same way WordPress does. Use Font Awesome or any other icon font to add the Phone icon.

body a[href*="tel:"]:before {
   font-family: "Font Awesome 5 Free";	
   content: "\f3cd";
}

After adding the Phone Icon you could still see a default SVG that WordPress adds when the social network is not recognized.

Hide unwanted svg

body a[href*="tel:"] svg {
	display: none;
}

As a bonus

/* remove icon background color */
.social-icons a {
	background-color: transparent;
}

Stel je vraag

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *