Bootstrap Fontawesome Icon Social Buttons

Developer
Stan Williams
Size
3,911 Kb
Views
40,480
  1. Bootstrap Fontawesome Icon Social Buttons Previews
  2. Bootstrap Fontawesome Icon Social Buttons HTML Codes
  3. Bootstrap Fontawesome Icon Social Buttons CSS Codes
  4. Bootstrap Fontawesome Icon Social Buttons JS Codes

How do I make an bootstrap fontawesome icon social buttons?

Bootstrap Fontawesome Icon Buttons. What is a bootstrap fontawesome icon social buttons? How do you make a bootstrap fontawesome icon social buttons? This script and codes were developed by Stan Williams on 08 September 2022, Thursday.

Bootstrap Fontawesome Icon Social Buttons Previews
IQ Test

Bootstrap Fontawesome Icon Social Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap Fontawesome Icon Social Buttons</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { text-align: center; padding: 10px;
}
.container { width: 90%; text-align: center; margin: auto;}
background: #121212;
p{ font-family: 'Rock Salt', sans-serif; font-size: 17px; font-weight: 700;
}
.pad50{ padding-top: 50px;
}
.button { display: inline-block; height: 40px; line-height: 40px; padding-right: 30px; padding-left: 70px; position: relative; background-color:rgb(0,0,0); color:rgb(255,255,255); text-decoration: none; text-transform: none letter-spacing: 1px; margin-bottom: 14px; text-shadow:1px 1px 0px rgba(0,0,0,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#ff123852,Positive=true); -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.7); box-shadow:0px 2px 2px rgba(0,0,0,0.7); -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=0,Color=#33002200,Positive=true);
}
.button:hover{ text-decoration: none; color: #ff3333;
}
.button p{font-size: 18px;}
.button span { position: absolute; left: 0; width: 50px; font-size:30px; -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid rgba(0,0,0,0.15); text-decoration: none;
}
.button.twitter { background: #00acee;
}
.button.facebook { background: #3b5998;
}
.button.google-plus{ background: #db4a39;
}
.button.linkedin { background: #0e76a8;
}
.button.youtube { background: #c4302b;
}
.button.github{ background: #171515;
}
.button.android { background: #a4c639;
}
.button.skype { background: #00aff0; }
.button.dropbox{ background: #3d9ae8;
}
.button.foursquare{ background: #25a0ca;
}
.button.apple{ background: #cdcdcd;
}
.button.dribbble{ background: #ea4c89;
}
.button.instagram{ background: #3f729b;
}
.button.pinterest{ background: #c8232c;
}
.button.stackexchange{ background: #ef8236;
}
.button.flickr{ background: #ff0084;
}
.text-center{ text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<h2>Bootstrap FontAwesome Icon Social Buttons</h2>
<div class="pad50"></div>
<div class="container"> <a href="https://facebook.com/stanwilliamsmusic" target="_blank" class="button facebook"><span><i class="icon-facebook"></i></span><p>Facebook</p></a> <a href="https://twitter.com/StansSongs" target="_blank" class="button twitter"><span><i class="icon-twitter"></i></span><p>Twitter</p></a> <a href="https://plus.google.com/u/0/+StanWilliams/posts" target="_blank" class="button google-plus"><span><i class="icon-google-plus"></i></span><p>Google +</p></a> <a href="https://gist.github.com/stanwmusic" target="_blank" class="button github"><span><i class="icon-github"></i></span><p>Github</p></a> <a href="https://www.linkedin.com/in/stanwilliams1" target="_blank" class="button linkedin"><span><i class="icon-linkedin"></i></span><p>Linkedin</p></a> <a href="#" class="button instagram"><span><i class="icon-instagram"></i></span><p>Instagram</p></a> <a href="https://www.flickr.com/photos/stanwilliams" target="_blank" class="button flickr"><span><i class="icon-flickr"></i></span><p>Flickr</p></a> <a href="https://www.pinterest.com/stanssongs/" target="_blank" class="button pinterest"><span><i class="icon-pinterest"></i></span><p>Pinterest</p></a> <a href="https://www.youtube.com/user/Stanwilliamsmusic" target="_blank" class="button youtube"><span><i class="icon-youtube"></i></span><p>YouTube</p></a> <a href="#" class="button stackexchange"><span><i class="icon-stackexchange"></i></span><p>Stack Overflow</p></a> <a href="#" class="button skype"><span><i class="icon-skype"></i></span><p>Skype</p></a> <a href="#" class="button dropbox"><span><i class="icon-dropbox"></i></span><p>Dropbox</p></a> <a href="#" class="button android"><span><i class="icon-android"></i></span><p>Android</p></a> <a href="#" class="button foursquare"><span><i class="icon-foursquare"></i></span><p>Foursquare</p></a> <a href="#" class="button apple"><span><i class="icon-apple"></i></span><p>Apple</p></a> <a href="#" class="button dribbble"><span><i class="icon-dribbble"></i></span><p>Dribbble</p></a>
</div> <script src="js/index.js"></script>
</body>
</html>

Bootstrap Fontawesome Icon Social Buttons - Script Codes CSS Codes

body { text-align: center; padding: 10px;
}
.container { width: 90%; text-align: center; margin: auto;}
background: #121212;
p{ font-family: 'Rock Salt', sans-serif; font-size: 17px; font-weight: 700;
}
.pad50{ padding-top: 50px;
}
.button { display: inline-block; height: 40px; line-height: 40px; padding-right: 30px; padding-left: 70px; position: relative; background-color:rgb(0,0,0); color:rgb(255,255,255); text-decoration: none; text-transform: none letter-spacing: 1px; margin-bottom: 14px; text-shadow:1px 1px 0px rgba(0,0,0,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#ff123852,Positive=true); -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.7); box-shadow:0px 2px 2px rgba(0,0,0,0.7); -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=0,Color=#33002200,Positive=true);
}
.button:hover{ text-decoration: none; color: #ff3333;
}
.button p{font-size: 18px;}
.button span { position: absolute; left: 0; width: 50px; font-size:30px; -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid rgba(0,0,0,0.15); text-decoration: none;
}
.button.twitter { background: #00acee;
}
.button.facebook { background: #3b5998;
}
.button.google-plus{ background: #db4a39;
}
.button.linkedin { background: #0e76a8;
}
.button.youtube { background: #c4302b;
}
.button.github{ background: #171515;
}
.button.android { background: #a4c639;
}
.button.skype { background: #00aff0; }
.button.dropbox{ background: #3d9ae8;
}
.button.foursquare{ background: #25a0ca;
}
.button.apple{ background: #cdcdcd;
}
.button.dribbble{ background: #ea4c89;
}
.button.instagram{ background: #3f729b;
}
.button.pinterest{ background: #c8232c;
}
.button.stackexchange{ background: #ef8236;
}
.button.flickr{ background: #ff0084;
}
.text-center{ text-align: center;
}

Bootstrap Fontawesome Icon Social Buttons - Script Codes JS Codes

/* active button will be underlined.
Click bottom 3 to tes ie, Foursquare , apple , or dribbble ones aren't linked to anywhere.
Bootstrap Fontawesome Icon Social Buttons - Script Codes
Bootstrap Fontawesome Icon Social Buttons - Script Codes
Home Page Home
Developer Stan Williams
Username Stanssongs
Uploaded September 08, 2022
Rating 3
Size 3,911 Kb
Views 40,480
Do you need developer help for Bootstrap Fontawesome Icon Social Buttons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Stan Williams (Stanssongs) Script Codes
Name
Horizontal Menu Demo
Animated Digital Flip Clock
CSS social buttons and icons
A Pen by Stan Williams
Glazing ribbon screensaver effect in HTML5 canvas
3D Hover Effect for Images
3D Book
Background Image Slideshow Menu
Cursor following menu demo
Mouse Position Background Focus Effect
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!