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.

Thumbnail
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 Codepen.io
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>
        <ul>
          <li><a href="https://twitter.com"><i class="icon-twitter"></i></a></li>
          <li><a href="https://facebook.com"><i class="icon-facebook"></i></a></li>
          <li><a href="https://instagram.com"><i class="icon-instagram"></i></a></li>
          <li><a href="https://pinterest.com"><i class="icon-pinterest"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/webercoder/social-icons-in-a-horizontal-list-fywuJ */
    // Imports
@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css');
@import url('//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

// 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 {
			.universal-inline-block;
			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 https://www.codeseek.co/webercoder/social-icons-in-a-horizontal-list-fywuJ */
    

Comments