Pure CSS Awesome Icons with Cheat Sheet Link: people, message, information, brightness, contrast, Linux, charts, and more

index.html

<div class="icon-wrapper"><i class="fa fa-users custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="icon-wrapper"><i class="fa fa-comment custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="icon-wrapper"><i class="fa fa-anchor custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="icon-wrapper"><i class="fa fa-adjust custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="icon-wrapper"><i class="fa fa-asterisk custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="icon-wrapper"><i class="fa fa-sun-o custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="icon-wrapper"><i class="fa fa-linux custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="icon-wrapper"><i class="fa fa-info-circle custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="icon-wrapper"><i class="fa fa-bar-chart custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="icon-wrapper"><i class="fa fa-plus-circle custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="icon-wrapper"><i class="fa fa-cubes custom-icon"><span class="fix-editor">&nbsp;</span></i></div>

<div class="container">
  <h2>Made in <a href="http://www.HyperAbsolute.com" target="_blank">HyperAbsolute | USA</a></h2>
</div>

<div class="awesome">
  <h2><a href="http://fontawesome.io/cheatsheet/" target="_blank">Font-Awesome Cheat Sheet</a></h2>
</div>

pure-css-awesome-icons-with-cheat-sheet-link-people-message-information-brightness-contrast-linux-charts-and-more.markdown

Pure CSS Awesome Icons with Cheat Sheet Link: people, message, information, brightness, contrast, Linux, charts, and more

Clean and Pure CSS Awesome Icons with a link to the great, the original, the classic, the special Font Awesome Cheat Sheet: includes people, message, information, brightness, contrast, Linux, charts, and more. Enjoy and Share | Sander Nizni

A Pen by Sander Nizni on CodePen.

License.

style.css

.custom-icon {
  font-size:50px;
  background:#666;
  background:rgba(0,0,0,0.4);
  padding:10px;
  -webkit-border-radius:1100%;
  -moz-border-radius:100%;
  -o-border-radius:100%;
  border-radius:100%;
  border:6px solid #fff;
  color:#fff;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.46);
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  width:60px;
  height:60px;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}
.custom-icon:hover {
  background:#65378F;
}
.fix-editor {
  display:none;
}
.icon-wrapper {
  display:inline-block;
}

h2 {
  font-weight: 450;
}

h2 a {
  font-weight: 450;
  text-decoration: none;
  color: #65378F;
}

h2 a:hover {
  opacity: .5;
}

.container {
  text-align: center;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.awesome {
  text-align: center;
  bottom: 35%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}