Social Icons in a Horizontal List

In this example below you will see how to do a Social Icons in a Horizontal List with some HTML / CSS and Javascript

Horizontal list with font-awesome icons.

This awesome code was written by webercoder, you can see more from this user in the personal repository.
You can find the original code on
Copyright webercoder ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
  <div class="row">
    <div class="span10 offset1">
      <div class="social-icons">
        <h1>Horizontal Social Icon List</h1>
          <li><a href=""><i class="icon-twitter"></i></a></li>
          <li><a href=""><i class="icon-facebook"></i></a></li>
          <li><a href=""><i class="icon-instagram"></i></a></li>
          <li><a href=""><i class="icon-pinterest"></i></a></li>

/*Downloaded from */
    // Imports
@import url('//');
@import url('//');
@import url(;

// Variables
@colorBase: rgba(68, 138, 175, 1);

// Mixins
.transition (@prop: all, @time: 1s, @ease: linear) {
	-webkit-transition: @prop @time @ease;
	-moz-transition: @prop @time @ease;
	-o-transition: @prop @time @ease;
	-ms-transition: @prop @time @ease;
	transition: @prop @time @ease;
.universal-inline-block {
	display: inline-block;
	zoom: 1;
	*display: inline;

// Styles
.social-icons {
  text-align: center;
  font-family: "Open Sans";
  font-weight: 300;
  font-size: 1.5em;
  color: @colorBase;
  h1 {
    margin: 40px 0;
  ul {
		list-style: none;
		margin: 0;
		padding: 0;
		li {
			vertical-align:  middle;
			a {
				display: block;
				font-size: 1.4em;
				margin: 0 5px;
				text-decoration: none;
				i {
					color: @colorBase;
					.transition(all, 0.2s, ease-in);
				&:hover {
					i {
						color: darken(@colorBase, 20%);
				&:focus, &:active {
					i {
						transition: none;
						color: darken(@colorBase, 40%);

/*Downloaded from */