patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
269 lines (268 loc) • 10 kB
HTML
---
categories: [Widgets]
layout: page
title: Icons
resource: true
---
<div class="row">
<div class="col-sm-6 col-md-6">
<h2>PatternFly Icons</h2>
<p>Custom icons and selections from <a href="http://icomoon.io/#icons">IcoMoon - Free</a>.</p>
<ul class="icons list-unstyled">
<li>
<span class="pficon pficon-add-circle-o"></span>
<span class="icon-class">pficon-add-circle-o</span>
</li>
<li>
<span class="pficon pficon-builder-image"></span>
<span class="icon-class">pficon-builder-image</span>
</li>
<li>
<span class="pficon pficon-close"></span>
<span class="icon-class">pficon-close</span>
</li>
<li>
<span class="pficon pficon-cluster"></span>
<span class="icon-class">pficon-cluster</span>
</li>
<li>
<span class="pficon pficon-container-node"></span>
<span class="icon-class">pficon-container-node</span>
</li>
<li>
<span class="pficon pficon-delete"></span>
<span class="icon-class">pficon-delete</span>
</li>
<li>
<span class="pficon pficon-edit"></span>
<span class="icon-class">pficon-edit</span>
</li>
<li>
<span class="pficon pficon-error-circle-o"></span>
<span class="icon-class">pficon-error-circle-o</span>
</li>
<li>
<span class="pficon pficon-export"></span>
<span class="icon-class">pficon-export</span>
</li>
<li>
<span class="pficon pficon-flag"></span>
<span class="icon-class">pficon-flag</span>
</li>
<li>
<span class="pficon pficon-folder-close"></span>
<span class="icon-class">pficon-folder-close</span>
</li>
<li>
<span class="pficon pficon-folder-open"></span>
<span class="icon-class">pficon-folder-open</span>
</li>
<li>
<span class="pficon pficon-help"></span>
<span class="icon-class">pficon-help</span>
</li>
<li>
<span class="pficon pficon-home"></span>
<span class="icon-class">pficon-home</span>
</li>
<li>
<span class="pficon pficon-history"></span>
<span class="icon-class">pficon-history</span>
</li>
<li>
<span class="pficon pficon-image"></span>
<span class="icon-class">pficon-image</span>
</li>
<li>
<span class="pficon pficon-import"></span>
<span class="icon-class">pficon-import</span>
</li>
<li>
<span class="pficon pficon-info"></span>
<span class="icon-class">pficon-info</span>
</li>
<li>
<span class="pficon pficon-kubernetes"></span>
<span class="icon-class">pficon-kubernetes</span>
</li>
<li>
<span class="pficon pficon-ok"></span>
<span class="icon-class">pficon-ok</span>
</li>
<li>
<span class="pficon pficon-openshift"></span>
<span class="icon-class">pficon-openshift</span>
</li>
<li>
<span class="pficon pficon-print"></span>
<span class="icon-class">pficon-print</span>
</li>
<li>
<span class="pficon pficon-project"></span>
<span class="icon-class">pficon-project</span>
</li>
<li>
<span class="pficon pficon-registry"></span>
<span class="icon-class">pficon-registry</span>
</li>
<li>
<span class="pficon pficon-replicator"></span>
<span class="icon-class">pficon-replicator</span>
</li>
<li>
<span class="pficon pficon-restart"></span>
<span class="icon-class">pficon-restart</span>
</li>
<li>
<span class="pficon pficon-route"></span>
<span class="icon-class">pficon-route</span>
</li>
<li>
<span class="pficon pficon-running"></span>
<span class="icon-class">pficon-running</span>
</li>
<li>
<span class="pficon pficon-save"></span>
<span class="icon-class">pficon-save</span>
</li>
<li>
<span class="pficon pficon-screen"></span>
<span class="icon-class">pficon-screen</span>
</li>
<li>
<span class="pficon pficon-service"></span>
<span class="icon-class">pficon-service</span>
</li>
<li>
<span class="pficon pficon-settings"></span>
<span class="icon-class">pficon-settings</span>
</li>
<li>
<span class="pficon pficon-thumb-tack-o"></span>
<span class="icon-class">pficon-thumb-tack-o</span>
</li>
<li>
<span class="pficon pficon-topology"></span>
<span class="icon-class">pficon-topology</span>
</li>
<li>
<span class="pficon pficon-user"></span>
<span class="icon-class">pficon-user</span>
</li>
<li>
<span class="pficon pficon-users"></span>
<span class="icon-class">pficon-users</span>
</li>
<li>
<span class="pficon pficon-warning-triangle-o"></span>
<span class="icon-class">pficon-warning-triangle-o</span>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-6">
<h2>Recommended Font Awesome Icons</h2>
<p>All <a href="http://fontawesome.io/icons/">Font Awesome</a> icons are available, but only these are recommended for use with PatternFly.</p>
<ul class="icons list-unstyled">
<li>
<span class="fa fa-angle-down"></span>
<span class="icon-class">fa-angle-down</span>
</li>
<li>
<span class="fa fa-angle-left"></span>
<span class="icon-class">fa-angle-left</span>
</li>
<li>
<span class="fa fa-angle-right"></span>
<span class="icon-class">fa-angle-right</span>
</li>
<li>
<span class="fa fa-angle-up"></span>
<span class="icon-class">fa-angle-up</span>
</li>
<li>
<span class="fa fa-angle-double-left"></span>
<span class="icon-class">fa-angle-double-left</span>
</li>
<li>
<span class="fa fa-angle-double-right"></span>
<span class="icon-class">fa-angle-double-right</span>
</li>
<li>
<span class="fa fa-arrow-circle-o-down"></span>
<span class="icon-class">fa-arrow-circle-o-down</span>
</li>
<li>
<span class="fa fa-ban"></span>
<span class="icon-class">fa-ban</span>
</li>
<li>
<span class="fa fa-check"></span>
<span class="icon-class">fa-check</span>
</li>
<li>
<span class="fa fa-clock-o"></span>
<span class="icon-class">fa-clock-o</span>
</li>
<li>
<span class="fa fa-cube"></span>
<span class="icon-class">fa-cube</span>
</li>
<li>
<span class="fa fa-cubes"></span>
<span class="icon-class">fa-cubes</span>
</li>
<li>
<span class="fa fa-envelope"></span>
<span class="icon-class">fa-envelope</span>
</li>
<li>
<span class="fa fa-filter"></span>
<span class="icon-class">fa-filter</span>
</li>
<li>
<span class="fa fa-lock"></span>
<span class="icon-class">fa-lock</span>
</li>
<li>
<span class="fa fa-minus"></span>
<span class="icon-class">fa-minus</span>
</li>
<li>
<span class="fa fa-plus"></span>
<span class="icon-class">fa-plus</span>
</li>
<li>
<span class="fa fa-power-off"></span>
<span class="icon-class">fa-power-off</span>
</li>
<li>
<span class="fa fa-refresh"></span>
<span class="icon-class">fa-refresh</span>
</li>
<li>
<span class="fa fa-search"></span>
<span class="icon-class">fa-search</span>
</li>
<li>
<span class="fa fa-star"></span>
<span class="icon-class">fa-star</span>
</li>
<li>
<span class="fa fa-star-o"></span>
<span class="icon-class">fa-star-o</span>
</li>
<li>
<span class="fa fa-tachometer"></span>
<span class="icon-class">fa-tachometer</span>
</li>
<li>
<span class="fa fa-thumb-tack"></span>
<span class="icon-class">fa-thumb-tack</span>
</li>
<li>
<span class="fa fa-unlock-alt"></span>
<span class="icon-class">fa-unlock-alt</span>
</li>
</ul>
</div>
</div>