How to Add Color to Squarespace Social Media Icons

One simple, yet highly useful feature of your Squarespace website is adding social media icons linking to your social media accounts such as Facebook, Twitter, and Google+. See Chapter 15: Configuring Site Settings of my book, Squarespace 6 For Dummies, about how to connect your social accounts to your site.

Once you have connected your social media accounts within the Connected Accounts settings in Site Settings, those accounts’ social media icons will display on your site. Your Squarespace template will most likely display the icons automatically either at the bottom of your site in the footer area, at the top of the site in the header area, or in both areas. You can choose where to display those icons within Style Editor.

Squarespace social media icons are not images?

The social media icons your Squarespace site displays are not images, such as a JPG or GIF image file, but in fact they are characters in a font, more specifically called an icon font. There are two main reasons why icon fonts are best suited for displaying social media icons.

  1. THEY CAN BE HUGE or tiny: Icon fonts do not get pixelated or distorted when you resize them just like text on your site. Your Squarespace template allows you to resize the social media icons within Style Editor. This means you can make them as big or little as you want.

  2. They’re always crispy and never soggy: With more and more devices getting high-def screens, like the retina displays on iPhone and iPad, the icons will always look sharp and never fuzzy no matter how huge or tiny you configure them.

While icon fonts have the above benefits for any use on any website, there is another benefit within Squarespace and how they are added to your site. You can apply custom color to each icon to make the icon match the brand color of the social media account links to. Let’s take a look at how you can color each icon by adding some custom CSS code.

Display Social Media Icons in Their Own Color

The color of the social media icons that are displayed within your template can be changed by a setting in Style Editor. Using the color setting in Style Editor currently sets all the icons to the same color. While this can provide your site’s design with a unified appeal, this may not always be a desired effect you want.

Fortunately, there is an easy way to target each icon and apply a custom color. Before I show you how to add the CSS code to apply color to your icons, the following is a list of all the social media sites Squarespace will display on your website with their corresponding brand color written in hexidecimal code for use in your site's custom CSS file.

I used a mid-gray value for Email, but you can change this to another color. Use this handy color reference to find the color code to replace with your own choice of color.

Let’s start coloring your icons.

Step 1: Setting Your Colors

Each social media icon that displays on your site has an HTML class selector specific to the social media service it represents. Targeting these selectors is how we are going to change the color of the icons, but first let’s assign each color to a variable, a feature available to use in your site's CSS code because Squarespace supports LESS, a dynamic stylesheet language that extends CSS.

@500px: #0a0100;
@dribbble: #ea4c89;
@email: #7f7f7f;
@facebook: #3b5998;
@flickr: #0063db;
@foursquare: #0072b1;
@github: #4183c4;
@googleplus: #dd4b39;
@instagram: #3f729b;
@linkedin: #007fb1;
@pinterest: #cb2128;
@smugmug: #8cca1e;
@tumblr: #2c4762;
@twitter: #00aced;
@vimeo: #1ab7ea;
@youtube: #ff3333;

A LESS variable allows you to set a commonly used value, such as a color, and assign it to a keyword preceded by the @ character. You set the variable in one place, i.e. the top of your CSS code, and then reference the keyword throughout the rest of your code where you want to use the value. When Squarespace serves your stylesheet to a site visitor, your LESS code is processed into standard CSS code.

Using variables will help you make quick changes throughout your code where you reference the keyword making updates as easy as modifying a line of code.

Step 2: Apply Your Color to Your Social Media Icons

Copy the following CSS code that lists the class selectors for all the social media sites Squarespace can connect to and display on your site. Paste the following code below the variables from Step 1 within your site’s CSS code window.

.social-fivehundredpix { color: @500px !important; }
.social-dribbble { color: @dribbble !important; }
.social-email { color: @email !important; }
.social-facebook { color: @facebook !important; }
.social-flickr { color: @flickr !important; }
.social-foursquare { color: @foursquare !important; }
.social-github { color: @github !important; }
.social-google { color: @googleplus !important; }
.social-instagram { color: @instagram !important; }
.social-linkedin { color: @linkedin !important; }
.social-pinterest { color: @pinterest !important; }
.social-smugmug { color: @smugmug !important; }
.social-tumblr { color: @tumblr !important; }
.social-twitter { color: @twitter !important; }
.social-vimeo { color: @vimeo !important; }
.social-youtube { color: @youtube !important; }

After you have pasted the code from Steps 1 and 2 in your CSS code window your social media icons will be colored individually.

We need to use !important at the end of the color declaration to override the color your Squarespace Style Editor setting applies to the social media icons.

Step 3: Change the hover state of the icons

Now let’s add a little extra interaction with some additional CSS code to have the icons change color when you hover your mouse over them. To do this, we need to add a hover state for each social media icon link.

My favorite way to do this is to lighten the color slightly using a LESS CSS function applied to the color declaration.

.social-fivehundredpix:hover { color: lighten(@500px, 10%) !important; }
.social-dribbble:hover { color: lighten(@dribbble, 10%) !important; }
.social-email:hover { color: lighten(@email, 10%) !important; }
.social-facebook:hover { color: lighten(@facebook, 10%) !important; }
.social-flickr:hover { color: lighten(@flickr, 10%) !important; }
.social-foursquare:hover { color: lighten(@foursquare, 10%) !important; }
.social-github:hover { color: lighten(@github, 10%) !important; }
.social-google:hover { color: lighten(@gooleplus, 10%) !important; }
.social-instagram:hover { color: lighten(@istagram, 10%) !important; }
.social-linkedin:hover { color: lighten(@inkedin, 10%) !important; }
.social-pinterest:hover { color: lighten(@pnterest, 10%) !important; }
.social-smugmug:hover { color: lighten(@smugmug, 10%) !important; }
.social-tumblr:hover { color: lighten(@tumblr, 10%) !important; }
.social-twitter:hover { color: lighten(@twitter, 10%) !important; }
.social-vimeo:hover { color: lighten(@vimeo, 10%) !important; }
.social-youtube:hover { color: lighten(youtube, 10%) !important; }

Complete Code for Easy Copy and Paste

The following is the complete code mentioned in this article for easy copying and pasting into your site.

@500px: #0a0100;
@dribbble: #ea4c89;
@email: #7f7f7f;
@facebook: #3b5998;
@flickr: #0063db;
@foursquare: #0072b1;
@github: #4183c4;
@googleplus: #dd4b39;
@instagram: #3f729b;
@linkedin: #007fb1;
@pinterest: #cb2128;
@smugmug: #8cca1e;
@tumblr: #2c4762;
@twitter: #00aced;
@vimeo: #1ab7ea;
@youtube: #ff3333;

.social-fivehundredpix { color: @500px !important; }
.social-dribbble { color: @dribbble !important; }
.social-email { color: @email !important; }
.social-facebook { color: @facebook !important; }
.social-flickr { color: @flickr !important; }
.social-foursquare { color: @foursquare !important; }
.social-github { color: @github !important; }
.social-google { color: @googleplus !important; }
.social-instagram { color: @instagram !important; }
.social-linkedin { color: @linkedin !important; }
.social-pinterest { color: @pinterest !important; }
.social-smugmug { color: @smugmug !important; }
.social-tumblr { color: @tumblr !important; }
.social-twitter { color: @twitter !important; }
.social-vimeo { color: @vimeo !important; }
.social-youtube { color: @youtube !important; }

.social-fivehundredpix:hover { color: lighten(@500px, 10%) !important; }
.social-dribbble:hover { color: lighten(@Dribbble, 10%) !important; }
.social-email:hover { color: lighten(@email, 10%) !important; }
.social-facebook:hover { color: lighten(@facebook, 10%) !important; }
.social-flickr:hover { color: lighten(@flickr, 10%) !important; }
.social-foursquare:hover { color: lighten(@foursquare, 10%) !important; }
.social-github:hover { color: lighten(@github, 10%) !important; }
.social-google:hover { color: lighten(@googleplus, 10%) !important; }
.social-instagram:hover { color: lighten(@instagram, 10%) !important; }
.social-linkedin:hover { color: lighten(@linkedin, 10%) !important; }
.social-pinterest:hover { color: lighten(@pinterest, 10%) !important; }
.social-smugmug:hover { color: lighten(@smugmug, 10%) !important; }
.social-tumblr:hover { color: lighten(@tumblr, 10%) !important; }
.social-twitter:hover { color: lighten(@twitter, 10%) !important; }
.social-vimeo:hover { color: lighten(@vimeo, 10%) !important; }
.social-youtube:hover { color: lighten(youtube, 10%) !important; }

What about the Social Links Block?

If you want to add social media icons in another area of your site, you can use the Social Links Block to add it to a page. See Chapter 14 - Automating Updates with Social Blocks of my book, Squarespace 6 For Dummies, about how to list your social accounts on your site with this block. Adding any of the code listed in this article will also modify the icons displayed by the Social Links Block.

Choosing the Color for the Icons

When I was choosing colors to use in Step 1 I consulted each social media site’s brand guidelines. Not all of the sites provided guidelines, and some of those that did, did not provide color values. The following is a list of the social media sites with notes about how I found the colors I choose to use to represent them.

  • 500px: Extracted color from their downloadable logo files.
  • Dribbble: Color is provided.
  • Facebook: Unfortunately, Facebook doesn’t list their official colors on the site, but they have a Facebook Asset Guide PDF that mentions colors on a non-existent page 40.
  • Foursquare: Color is provided.
  • GitHub: Multiple colors are provided. I picked my favorite.
  • Google+: Color is provided.
  • Instagram: Instagram does not mention any official colors.
  • LinkedIn: LinkedIn does not mention any official colors.
  • Pinterest: Extracted the color from the downloadable icon logo.
  • Tumblr: Tumblr does not mention any official colors.
  • Twitter: Twitter does not mention any official colors.
  • Vimeo: Color is provided.
  • YouTube: Color is provided.

There were two additional websites I consulted that provided colors for a large collection of social media sites.

These sites were helpful in determining colors for those social media sites that did not list their colors in a brand guideline. If you want to use colors from either of these websites, then use any or all of the below LESS CSS variables in place of the LESS variables in Step 1.

// Color Source: http://brandcolors.net

@500px: #02adea;
@dribbble: #ea4c89;
@dropbox: #3d9ae8;
@email: #cccccc;
@facebook: #3b5998;
@flickr: #ff0084;
@foursquare: #25a0ca;
@github: #171515;
@googleplus: #dd4b39;
@instagram: #3f729b;
@linkedin: #0e76a8;
@pinterest: #c8232c;
@smugmug: #8cca1e;
@tumblr: #34526f;
@twitter: #00acee;
@vimeo: #86c9ef;
@youtube: #c4302b;
// Color Source: http://simpleicons.org

@500px: #0a0100;
@dribbble: #ea4c89;
@dropbox: #2281cf;
@email: #cccccc;
@facebook: #3b5998;
@flickr: #0063db;
@foursquare: #2398c9;
@github: #4183c4;
@googleplus: #d14836;
@instagram: #3f729b;
@linkedin: #007fb1;
@pinterest: #cb2027;
@smugmug: #8cca1e;
@tumblr: #2c4762;
@twitter: #00aced;
@vimeo: #44bbff;
@youtube: #cd332d;

Conclusion

If you have any questions, comments, or want to share how you colored your social media icons on your Squarespace website I’d love to hear from you in the comments area. If you have any ideas about future articles don’t hesitate to send me a message.

Source

Share

Kris Black

Kris Black is a user experience designer & developer building websites and mobile apps at truematter. Kris is also a partner at black&hue, specializing in building websites on Squarespace for small businesses, creative professionals, and entrepreneurs.

Learn more about Kris at his website.