Skip to content

Instantly share code, notes, and snippets.

@sdaityari sdaityari/socialicons.md Secret forked from kawadhiya21/socialicons.md
Last active Aug 29, 2015

Embed
What would you like to do?

Social Buttons using CSS3 and Icon set

Social websites such as Facebook, Twitter, Google+ and others play an important role in marketing and publicity. Providing a social widget simplifies the task for the users visiting the page to share, like or rate your content, therefore helping in publicizing the same.

You have the option of using either standard social widgets or create your own social buttons using social icons on your website. However, icons are preferable as they can be customized to fit, unlike social widgets which have a standard look and dimensions, which makes them look common. We will make a simple set buttons (which can definitely be improved upon) which look like the following.

Social Media Button Set

This requires introduction of two CSS3 features:

  1. @import : The @import CSS rule allows to import style rules from other style sheets. We use the url to import by providing a url (the source is given at the bottom)

  2. :before : This inserts the element to appear before the element from selected element-tag. It may sound confusing now but would be clear later on.

To begin, lets initiate the basic HTML syntax.

<html>
<head>
	<title>Social Icons using CSS3 and Icons</title>
	<style type="text/css">
</head>
	<body>
	</body>
</html>

Now we add the social icons using the @import.

<html>
<head>
	<title>Social Icons using CSS3 and Icons</title>
	<style type="text/css">
	@import url(http://weloveiconfonts.com/api/?family=brandico);

        /* brandico */
	[class*="brandico-"]:before {
	  font-family: 'brandico', sans-serif;
	}
	</style>
</head>
...

We have provided a url which imports some social icons and a font. [class*="brandico-"] tells that any class which has a name similar to brandico-### will have the rules applied, i.e., font-family is 'brandico' (or sans-serif if brandico is absent).

Using the documentation on the homepage, social icons classes can be identified which can be applied to our template. Example:

  1. Twitter : class = brandico-twitter-bird
  2. Facebook : class = brandico-facebook
  3. Google+ : class = brandico-googleplus-rect

Hence, using the above three classes, we create our buttons, which appear as icons. The complete code is as follows.

<html>
<head>
	<title>Social Icons using CSS3 and Icons</title>
	<style type="text/css">
	@import url(http://weloveiconfonts.com/api/?family=brandico);
	/* brandico */
	[class*="brandico-"]:before {
	  font-family: 'brandico', sans-serif;
	}
	</style>
</head>
	<body>
          <button>
            Spread
            <span class="brandico brandico-twitter-bird"></span>
            the word
          </button>
          <button>
            Like
            <span class="brandico brandico-facebook"></span>
            Please
          </button>
          <button>
            Share
            <span class="brandico brandico-googleplus-rect"></span>
            and +1
          </button>
	</body>
</html>

What :before did ?

Take the example of last button, the one of Google+. It simply forced the icon to appear before the text 'and +1'.

There are various icons and icon-sets available on this website and one can choose the best which fits the UI. But definitely, using this method simplifies the use of icons. We will come back again with more tricks.

Note- The icons used here are taken from http://weloveiconfonts.com/ which also turns out to be a free cloud host for them. This blog is an inspiration from the basic example provided on the host website.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.