Social website such as Facebook , Twitter, Google+ and scores of others play an important role in marketing and publicity. Providing a social widget simplifies the task for the users visiting the page who share/like or rate the content and help in publicizing. Now using social media icons can be helpful as they are standardized and can be customized to fit elements unlike the social widgets which do not get updated or appear too common everywhere. We will make a simple set buttons (and definitely you can improve it) which look like this:
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 ie 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, we use them in our buttons to appear as icons. The complete code:
<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.
PS: 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.