@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); /* The above link can also go in HTML document as a link in head. Rather than @import in an external CSS file, The following code into the section of your site's HTML. */ /* * Social Buttons for Bootstrap * * Copyright 2013-2014 Panayiotis Lipiridis * Licensed under the MIT License * * https://github.com/lipis/bootstrap-social */ .btn-social { position: relative; /* padding-left: 44px; */ text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .btn-social :first-child { position: absolute; left: 0; top: 0; bottom: 0; width: 32px; line-height: 34px; font-size: 1.6em; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.2) } .btn-social.btn-lg { padding-left: 61px } .btn-social.btn-lg :first-child { line-height: 45px; width: 45px; font-size: 1.8em } .btn-social.btn-sm { padding-left: 38px } .btn-social.btn-sm :first-child { line-height: 28px; width: 28px; font-size: 1.4em } .btn-social.btn-xs { padding-left: 30px } .btn-social.btn-xs :first-child { line-height: 20px; width: 20px; font-size: 1.2em } .btn-social-icon { position: relative; padding-left: 44px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 34px; width: 34px; padding: 0 } .btn-social-icon :first-child { position: absolute; left: 0; top: 0; bottom: 0; width: 32px; line-height: 34px; font-size: 1.6em; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.2) } .btn-social-icon.btn-lg { padding-left: 61px } .btn-social-icon.btn-lg :first-child { line-height: 45px; width: 45px; font-size: 1.8em } .btn-social-icon.btn-sm { padding-left: 38px } .btn-social-icon.btn-sm :first-child { line-height: 28px; width: 28px; font-size: 1.4em } .btn-social-icon.btn-xs { padding-left: 30px } .btn-social-icon.btn-xs :first-child { line-height: 20px; width: 20px; font-size: 1.2em } .btn-social-icon :first-child { border: none; text-align: center; width: 100% !important } .btn-social-icon.btn-lg { height: 45px; width: 45px; padding-left: 0; padding-right: 0 } .btn-social-icon.btn-sm { height: 30px; width: 30px; padding-left: 0; padding-right: 0 } .btn-social-icon.btn-xs { height: 22px; width: 22px; padding-left: 0; padding-right: 0 } .btn-facebook { color: #fff; background-color: #3b5998; border-color: rgba(0, 0, 0, 0.2) } .btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .open .dropdown-toggle.btn-facebook { color: #fff; background-color: #30487b; border-color: rgba(0, 0, 0, 0.2) } .btn-facebook:active, .btn-facebook.active, .open .dropdown-toggle.btn-facebook { background-image: none } .btn-facebook.disabled, .btn-facebook[disabled], fieldset[disabled] .btn-facebook, .btn-facebook.disabled:hover, .btn-facebook[disabled]:hover, fieldset[disabled] .btn-facebook:hover, .btn-facebook.disabled:focus, .btn-facebook[disabled]:focus, fieldset[disabled] .btn-facebook:focus, .btn-facebook.disabled:active, .btn-facebook[disabled]:active, fieldset[disabled] .btn-facebook:active, .btn-facebook.disabled.active, .btn-facebook[disabled].active, fieldset[disabled] .btn-facebook.active { background-color: #3b5998; border-color: rgba(0, 0, 0, 0.2) } .btn-github { color: #fff; background-color: #444; border-color: rgba(0, 0, 0, 0.2) } .btn-github:hover, .btn-github:focus, .btn-github:active, .btn-github.active, .open .dropdown-toggle.btn-github { color: #fff; background-color: #303030; border-color: rgba(0, 0, 0, 0.2) } .btn-github:active, .btn-github.active, .open .dropdown-toggle.btn-github { background-image: none } .btn-github.disabled, .btn-github[disabled], fieldset[disabled] .btn-github, .btn-github.disabled:hover, .btn-github[disabled]:hover, fieldset[disabled] .btn-github:hover, .btn-github.disabled:focus, .btn-github[disabled]:focus, fieldset[disabled] .btn-github:focus, .btn-github.disabled:active, .btn-github[disabled]:active, fieldset[disabled] .btn-github:active, .btn-github.disabled.active, .btn-github[disabled].active, fieldset[disabled] .btn-github.active { background-color: #444; border-color: rgba(0, 0, 0, 0.2) } .btn-envelope { color: #fff; background-color: #00ffff; border-color: rgba(0, 0, 0, 0.2) } .btn-envelope:hover, .btn-envelope:focus, .btn-envelope:active, .btn-envelope.active, .open .dropdown-toggle.btn-envelope { color: #fff; background-color: white; border-color: rgba(0, 0, 0, 0.2) } .btn-envelope:active, .btn-envelope.active, .open .dropdown-toggle.btn-envelope { background-image: none } .btn-envelope.disabled, .btn-envelope[disabled], fieldset[disabled] .btn-envelope, .btn-envelope.disabled:hover, .btn-envelope[disabled]:hover, fieldset[disabled] .btn-envelope:hover, .btn-envelope.disabled:focus, .btn-envelope[disabled]:focus, fieldset[disabled] .btn-envelope:focus, .btn-envelope.disabled:active, .btn-envelope[disabled]:active, fieldset[disabled] .btn-envelope:active, .btn-envelope.disabled.active, .btn-envelope[disabled].active, fieldset[disabled] .btn-envelope.active { background-color: #dd4b39; border-color: rgba(0, 0, 0, 0.2) } .btn-instagram { color: #fff; background-color: #ca3523; border-color: rgba(0, 0, 0, 0.2) } .btn-instagram:hover, .btn-instagram:focus, .btn-instagram:active, .btn-instagram.active, .open .dropdown-toggle.btn-instagram { color: #fff; background-color: #ca3523; border-color: rgba(0, 0, 0, 0.2) } .btn-instagram:active, .btn-instagram.active, .open .dropdown-toggle.btn-instagram { background-image: none } .btn-instagram.disabled, .btn-instagram[disabled], fieldset[disabled] .btn-instagram, .btn-instagram.disabled:hover, .btn-instagram[disabled]:hover, fieldset[disabled] .btn-instagram:hover, .btn-instagram.disabled:focus, .btn-instagram[disabled]:focus, fieldset[disabled] .btn-instagram:focus, .btn-instagram.disabled:active, .btn-instagram[disabled]:active, fieldset[disabled] .btn-instagram:active, .btn-instagram.disabled.active, .btn-instagram[disabled].active, fieldset[disabled] .btn-instagram.active { background-color: #3f729b; border-color: rgba(0, 0, 0, 0.2) } .btn-linkedin { color: #fff; background-color: #007bb6; border-color: rgba(0, 0, 0, 0.2) } .btn-linkedin:hover, .btn-linkedin:focus, .btn-linkedin:active, .btn-linkedin.active, .open .dropdown-toggle.btn-linkedin { color: #fff; background-color: #005f8d; border-color: rgba(0, 0, 0, 0.2) } .btn-linkedin:active, .btn-linkedin.active, .open .dropdown-toggle.btn-linkedin { background-image: none } .btn-linkedin.disabled, .btn-linkedin[disabled], fieldset[disabled] .btn-linkedin, .btn-linkedin.disabled:hover, .btn-linkedin[disabled]:hover, fieldset[disabled] .btn-linkedin:hover, .btn-linkedin.disabled:focus, .btn-linkedin[disabled]:focus, fieldset[disabled] .btn-linkedin:focus, .btn-linkedin.disabled:active, .btn-linkedin[disabled]:active, fieldset[disabled] .btn-linkedin:active, .btn-linkedin.disabled.active, .btn-linkedin[disabled].active, fieldset[disabled] .btn-linkedin.active { background-color: #007bb6; border-color: rgba(0, 0, 0, 0.2) } .btn-twitter { color: #fff; background-color: #55acee; border-color: rgba(0, 0, 0, 0.2) } .btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-twitter.active, .open .dropdown-toggle.btn-twitter { color: #fff; background-color: #309aea; border-color: rgba(0, 0, 0, 0.2) } .btn-twitter:active, .btn-twitter.active, .open .dropdown-toggle.btn-twitter { background-image: none } .btn-twitter.disabled, .btn-twitter[disabled], fieldset[disabled] .btn-twitter, .btn-twitter.disabled:hover, .btn-twitter[disabled]:hover, fieldset[disabled] .btn-twitter:hover, .btn-twitter.disabled:focus, .btn-twitter[disabled]:focus, fieldset[disabled] .btn-twitter:focus, .btn-twitter.disabled:active, .btn-twitter[disabled]:active, fieldset[disabled] .btn-twitter:active, .btn-twitter.disabled.active, .btn-twitter[disabled].active, fieldset[disabled] .btn-twitter.active { background-color: #55acee; border-color: rgba(0, 0, 0, 0.2) }