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.
This requires introduction of two CSS3 features:
-
@import: The @import CSS rule allows to import style rules from other style sheets. We use theurlto import by providing a url (the source is given at the bottom) -
: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:
- Twitter : class =
brandico-twitter-bird - Facebook : class =
brandico-facebook - 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>
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.