Skip to content

Instantly share code, notes, and snippets.

@dryan1144
Last active December 21, 2015 05:09
Show Gist options
  • Save dryan1144/6254476 to your computer and use it in GitHub Desktop.
Save dryan1144/6254476 to your computer and use it in GitHub Desktop.
Basic CSS styling for custom share.
/*Healing Arts Web Custom Share Icons*/
/*Change reference to font folder if necessary*/
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.custom-share-container ul.social-media-icons li:first-child {
margin-left:0;
}
.custom-share-container {
margin-top:25px;
margin-bottom:0;
}
.custom-share-container h3 {
margin-bottom:10px;
}
.custom-share-container ul.social-media-icons {
margin-left:0;
margin-bottom:25px;
list-style:none;
text-align:center;
background:#E4E4E4;
padding:10px;
overflow:hidden; /*remove if you have a .clearfix class in your stylesheet or if you need box-shadow on this element*/
}
.custom-share-container ul.social-media-icons li {
margin-bottom:0;
display:inline-block;
zoom:1;
*display:inline;
float:none;
margin-left:10%;
}
.custom-share-container ul.social-media-icons li a {
font-size:40px;
line-height: 40px;
background:#999; /*fallback*/
background: rgba(0,0,0,.3);
width: 40px;
text-align: center;
display: block;
color:#fff;
float:none;
font-family:icomoon;
}
.custom-share-container:hover ul.social-media-icons li a {
background:#777; /*fallback*/
background:rgba(0,0,0,.5);
color:#fff;
}
.custom-share-container .social-media-icons li a:hover {
color:#fff;
background:rgba(0,0,0, 0.75);
}
.custom-share-container .social-media-icons li.facebook a:hover {
background:#3B5998;
}
.custom-share-container .social-media-icons li.twitter a:hover {
background:#00A0D1;
}
.custom-share-container .social-media-icons li.google-plus a:hover {
background:#C63D2D;
}
.custom-share-container .social-media-icons li.linked-in a:hover {
background:#4875B4;
}
/*Feel free to edit spacing of icons for responsive layout*/
@media (min-width: 768px) and (max-width: 1199px) {
.custom-share-container .social-media-icons li {
margin-left:6.5%;
}
}
@media (max-width: 767px) {
.custom-share-container .social-media-icons li {
margin-left:5%;
}
}
@media (max-width: 480px) {
.custom-share-container .social-media-icons {
padding:5px;
}
.custom-share-container .social-media-icons li {
margin-left:12px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment