June 27

Displaying Social Media Icons on Your Website

Nowadays, it’s rare to not see social media icons on a website.
Most of the time, social media icons are lined up in a row and displayed in the header or footer of the page.

I thought it would be nice to think of an alternate way to display these icons:

demo

The demo above is a container which includes the text: “Follow me on…”  When you hover over the box this text fades out and the social icons slide in from different directions to fill the container.  When you hover/mouse out of the box, the icons slide back out of the frame and the text fades back in.

This is a simple effect and very easy to do with minimal markup (especially when using compass and scss).

This is our HTML:

[code type=html]

Follow me on…

[/code]

We use font icons for the social media icons ( you could use svgs), and display them using the data-icon attribute.

This is the SCSS:

[code type=css]
@font-face {
font-family: ‘icomoonregular’;
src: url(‘icomoon-webfont.eot’);
}

@font-face {
font-family: ‘icomoonregular’;
src: url(data:font/truetype;charset=utf-8;base64) format(‘truetype’),
url(‘icomoon-webfont.svg#icomoonregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: ‘icomoonregular’;
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
a {
font-size: 80px;
color: white;
position: absolute;
top: 50%;
left: 50%;
margin: -40px 0 0 -40px;
text-decoration: none;
}
h1 {
font-family: ‘Josefin Slab’, serif;
font-size: 32px;
text-align: center;
position: relative;
top: 50%;
margin-top: -16px;
@include opacity(1);
@include transition(0.55s);
@include transition-delay(.2s);
}
figure {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
background: white;
overflow: hidden;
border: 5px solid white;
@include border-radius(20px);
}
.facebook {
position: absolute;
top: 0;
left: -50%;
width: 50%;
height: 50%;
background: #FFEADC;
border-bottom: 5px solid white;
border-right: 5px solid white;
@include transition(0.55s);
@include border-top-left-radius(15px);
}
.twitter{
position: absolute;
bottom: -50%;
left: 0;
width: 50%;
height: 50%;
background: #C9B3CA;
border-right: 5px solid white;
@include transition(0.55s);
@include border-bottom-left-radius(15px);
}
.vimeo {
position: absolute;
top: -50%;
right: 0;
width: 50%;
height: 50%;
background: #D7EFFF;
border-bottom: 5px solid white;
@include transition(0.55s);
@include border-top-right-radius(15px);
}
.google {
position: absolute;
bottom: 0;
right: -50%;
width: 50%;
height: 50%;
background: #D9CDFF;
@include transition(0.55s);
@include border-bottom-right-radius(15px);
}
figure:hover {

h1 {
@include opacity(0);
@include transition(0.15s);
}
.facebook {
left: 0;
}
.twitter {
bottom: 0;
}
.vimeo {
top: 0;
}
.google {
right: 0;
}
}
div:hover {
background: #FDCCE6;
cursor: pointer;
}

[/code]

 

If you’re looking for a fun and different way to display your social media icons consider a container like this one. It will provide a unique outlook on a standard part of your website.