A Pen by Tomomi Imura (@girlie_mac).

index.html

<h1>Wow. So trendy. Such Flat Design Long-Shadow Font Icons.</h1>
<ul>
  <li class="icon fontawesome-globe"></li>
  <li class="icon fontawesome-cog"></li>
  <li class="icon fontawesome-time"></li>
  <li class="icon fontawesome-github"></li>
  <li class="icon fontawesome-pinterest"></li>
</ul>

style.css

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

body {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #666;
}
h1, h2 {
  font-weight: normal;
}
li {
  list-style-type: none; 
} 

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
.icon, .icon::after {
  border-radius: 20px;
}
.icon {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #666;
  color: #fff;
  font-size: 74px;
  line-height: 100px;
  text-align: center;
  z-index: 1;
  margin: .25em;
  display: inline-block;
 }
.icon::after {
  content: "";
  display: block;
  width: 74px;
  height: 74px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(35deg,
	transparent 20%, rgba(0,0,0,.2) 20%, rgba(0,0,0,.2) 85%,
	transparent 85%);
  z-index: -1;
}

.fontawesome-cog {
  background-color: #2baae0;
}
.fontawesome-github {
  background-color: #666;
}
.fontawesome-pinterest {
  background-color: #C92228;
}
.fontawesome-globe {
  background-color: #3b5998;
}
.fontawesome-time {
  background-color: hotpink;
}

Wow.-So-trendy.-Such-Flat-Design-Long-Shadow-Font-Icons..markdown

Wow. So trendy. Such Flat Design Long-Shadow Font Icons.

Using CSS font icons and gradients.

A Pen by Tomomi Imura (@girlie_mac) on CodePen.

License.