Large size social media icons css free download

Today we are introducing a very simple attractive Large size social media icons is a best solution for your websites to linked with respective social media page. This is very simple and clean responsive Large size social media icons

Here we are creating large size of social media icons using uss, css3 and font awesome. that make attracting section of your template. This is 100% responsive cross browser, compatible on all devices, displayed on all screen sizes. It is entirely built in HTML5, CSS3. Make it yours now by using it, downloading it and please share it.

TEMPLATE INFORMATION:

Template Name : – Large size social media icons css.
Date Created : – 09-03-2017
Compatible Browsers : – Google Chrome, Firefox, Safari, IE 10, Opera etc.
Keywords : – free social media icons using font awesome, free social media icons vector, social media icons 2016, social media icons 2017, social media icons large size, flat social media icons, social media icons with different color, social media icon set, css social media icons using font awesome, awesome social media icons, beautifull social media icons.

HTML code of social media icons

<div class="social_icon_grid">
    <div class="social_icon_grid_inner_div">
        <div class="social_icon_main_grid">
            <a href="#" class="icon_contact_facebook">
                <i class="fa fa-facebook" aria-hidden="true"></i>
                <p>Facebook</p>
            </a>
        </div>
        <div class="social_icon_main_grid">
            <a href="#" class="icon_contact_twitter">
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <p>Twitter</p>
            </a>
        </div>
    
        <div class="social_icon_main_grid">
            <a href="#" class="icon_contact_google">
                <i class="fa fa-google-plus" aria-hidden="true"></i>
                <p>Google+</p>
            </a>
        </div>
        <div class="social_icon_main_grid">
            <a href="#" class="icon_contact_instagram">
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <p>Instagram</p>
            </a>
        </div>
        
        <div class="social_icon_main_grid">
            <a href="#" class="icon_contact_rss">
                <i class="fa fa-rss"></i>
                <p>RSS</p>
            </a>
        </div>
    </div>
</div>
<div class="clearfix"> </div>

CSS code of social media icons

// Add font awesome css file link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.social_icon_grid {
        margin: 2em 0 0;
    }
html, body{
    font-size: 100%;
    font-family: sans-serif;
    background:#ffffff;
    margin: 0;
}

.clearfix{clear: both;}

.social_icon_main_grid{
    width: 20%;
    text-align:center;
}
.social_icon_main_grid a{
    padding:3.5em;
    display:block;
    text-decoration:none;
}
.social_icon_main_grid{
    float:left;
}
.icon_contact_facebook{
    background:#3b5998;
}
.icon_contact_facebook:hover{
    background:#4e72bd;
}
.icon_contact_twitter{
    background:#1da1f2;
}
.icon_contact_twitter:hover{
    background:#51b8f7;
}
.icon_contact_google{
    background:#dd4b39;
}
.icon_contact_google:hover{
    background:#f95945;
}
.icon_contact_instagram{
    background:#833ab4;
}
.icon_contact_instagram:hover{
    background:#a850e2;
}
.icon_contact_rss{
    background:#f26522;
}
.icon_contact_rss:hover{
    background:#ec763e;
}
.social_icon_main_grid i{
    color:#fff;
    font-size:3em;
}
.social_icon_main_grid p{
    color:#fff;
    font-size:1em;
    margin-top:.5em;
}
@media(max-width:850px){
.social_icon_main_grid {
    width: 50%;
    text-align: center;
}
}
</style>

If You have any question and problem in this code feel free, leave comment below! SHARE WITH YOUR FRIENDS..