Edit in JSFiddle

<!-- EXAMPLES -->
<div id="icons" class="container">
<h2><strong>84 GUI icons</strong></h2>
<div class="section">
<h3>User interaction</h3>
<ul>
<li class="search"><a href="#non">Search</a></li>
<li class="comment"><a href="#non">Comment</a></li>
<li class="like"><a href="#non">Like</a></li>
<li class="add"><a href="#non">Add</a></li>
<li class="remove"><a href="#non">Remove</a></li>
<li class="delete"><a href="#non">Delete</a></li>
<li class="add-alt"><a href="#non">Add</a></li>
<li class="remove-alt"><a href="#non">Remove</a></li>
<li class="delete-alt"><a href="#non">Delete</a></li>
<li class="report"><a href="#non">Report</a></li>
<li class="trash"><a href="#non">Trash</a></li>
<li class="lock"><a href="#non">Lock</a></li>
<li class="unlock"><a href="#non">Unlock</a></li>
<li class="update"><a href="#non">Update status</a></li>
<li class="retweet"><a href="#non">Retweet</a></li>
<li class="save"><a href="#non">Save</a></li>
<li class="edit"><a href="#non">Edit</a></li>
<li class="download"><a href="#non">Download</a></li>
<li class="arrow forward"><a href="#non">Forward</a></li>
<li class="arrow back"><a href="#non">Back</a></li>
<li class="arrow up"><a href="#non">Up</a></li>
<li class="arrow down"><a href="#non">Down</a></li>
<li class="arrow-alt forward"><a href="#non">Forward</a></li>
<li class="arrow-alt back"><a href="#non">Back</a></li>
<li class="arrow-alt up"><a href="#non">Up</a></li>
<li class="arrow-alt down"><a href="#non">Down</a></li>
<li class="arrow-alt2 forward"><a href="#non">Forward</a></li>
<li class="arrow-alt2 back"><a href="#non">Back</a></li>
<li class="arrow-alt2 up"><a href="#non">Up</a></li>
<li class="arrow-alt2 down"><a href="#non">Down</a></li>
</ul>
</div>
<div class="section">
<h3>Miscellaneous</h3>
<ul>
<li class="home"><a href="#non">Home</a></li>
<li class="photo"><a href="#non">Photo</a></li>
<li class="video"><a href="#non">Video</a></li>
<li class="music"><a href="#non">Music</a></li>
<li class="call"><a href="#non">Call</a></li>
<li class="call call-on"><a href="#non">Call in progress</a></li>
<li class="tags"><a href="#non">Tags</a></li>
<li class="rss"><a href="#non">RSS</a></li>
<li class="email"><a href="#non">Email</a></li>
<li class="profile"><a href="#non">Profile</a></li>
<li class="file"><a href="#non">File</a></li>
<li class="folder"><a href="#non">Folder</a></li>
<li class="list"><a href="#non">List view</a></li>
<li class="permalink"><a href="#non">Permalink</a></li>
<li class="history"><a href="#non">History</a></li>
<li class="tools"><a href="#non">Tools</a></li>
<li class="player">MP3 Player</li>
<li class="headphones">Headphones</li>
<li class="ribbon">Ribbon</li>
<li class="views">Views</li>
<li class="location">Location</li>
<li class="info">Info</li>
<li class="help">Help</li>
<li class="pie">Pie chart</li>
<li class="success">Success</li>
<li class="success-alt">Success (alt)</li>
<li class="warning">Warning</li>
<li class="denied">Denied</li>
</ul>
</div>
<div class="section">
<h3>Media controls</h3>
<ul>
<li class="power"><a href="#non">Power</a></li>
<li class="play"><a href="#non">Play</a></li>
<li class="stop"><a href="#non">Stop</a></li>
<li class="pause"><a href="#non">Pause</a></li>
<li class="play-alt"><a href="#non">Play</a></li>
<li class="stop-alt"><a href="#non">Stop</a></li>
<li class="pause-alt"><a href="#non">Pause</a></li>
<li class="volume"><a href="#non">Volume</a></li>
<li class="volume volume-on"><a href="#non">Volume on</a></li>
<li class="volume mute"><a href="#non">Mute</a></li>
<li class="volume volume-up"><a href="#non">Volume up</a></li>
<li class="volume volume-down"><a href="#non">Volume down</a></li>
<li class="mic"><a href="#non">Mic</a></li>
<li class="fforward"><a href="#non">Fast forward</a></li>
<li class="frewind"><a href="#non">Fast rewind</a></li>
<li class="next"><a href="#non">Next track</a></li>
<li class="prev"><a href="#non">Previous track</a></li>
<li class="repeat"><a href="#non">Repeat</a></li>
<li class="expand"><a href="#non">Expand</a></li>
<li class="shrink"><a href="#non">Shrink</a></li>
<li class="toggle-size"><a href="#non">Toggle video size</a></li>
<li class="pop"><a href="#non">Pop out</a></li>
<li class="enlarge"><a href="#non">Enlarge</a></li>
<li class="full"><a href="#non">Full-screen</a></li>
<li class="exit"><a href="#non">Exit full-screen</a></li>
<li class="eject"><a href="#non">Eject</a></li>
</ul>
</div>
</div>
<!-- end EXAMPLES -->
@import url('http://nicolasgallagher.com/pure-css-gui-icons/demo/default.css');