icons.html
Home
/
themes /
src /
main /
node_modules /
rcue /
tests /
icons.html
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us">
<!--<![endif]-->
<head>
<title>Icons - Red Hat® Common User Experience</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/img/favicon.ico">
<!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/img/apple-touch-icon-precomposed-152.png">
<!-- iPad retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/apple-touch-icon-precomposed-144.png">
<!-- iPad non-retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/img/apple-touch-icon-precomposed-76.png">
<!-- iPad non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/apple-touch-icon-precomposed-72.png">
<!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/img/apple-touch-icon-precomposed-180.png">
<!-- iPhone retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/apple-touch-icon-precomposed-114.png">
<!-- iPhone non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/img/apple-touch-icon-precomposed-57.png">
<link rel="stylesheet" href="../dist/css/rcue.min.css" >
<link rel="stylesheet" href="../dist/css/rcue-additions.min.css" >
<link href="tests.css" rel="stylesheet" media="screen, print">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../components/patternfly/dist/js/patternfly.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Icons</h1>
</div>
<div class="alert alert-warning">
<span class="pficon pficon-warning-triangle-o"></span>
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
</div>
<hr>
<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-applications"></span>
<span class="icon-class">pficon-applications</span>
</li>
<li>
<span class="pficon pficon-arrow"></span>
<span class="icon-class">pficon-arrow</span>
</li>
<li>
<span class="pficon pficon-asleep"></span>
<span class="icon-class">pficon-asleep</span>
</li>
<li>
<span class="pficon pficon-automation"></span>
<span class="icon-class">pficon-automation</span>
</li>
<li>
<span class="pficon pficon-blueprint"></span>
<span class="icon-class">pficon-blueprint</span>
</li>
<li>
<span class="pficon pficon-build"></span>
<span class="icon-class">pficon-build</span>
</li>
<li>
<span class="pficon pficon-builder-image"></span>
<span class="icon-class">pficon-builder-image</span>
</li>
<li>
<span class="pficon pficon-bundle"></span>
<span class="icon-class">pficon-bundle</span>
</li>
<li>
<span class="pficon pficon-catalog"></span>
<span class="icon-class">pficon-catalog</span>
</li>
<li>
<span class="pficon pficon-close"></span>
<span class="icon-class">pficon-close</span>
</li>
<li>
<span class="pficon pficon-cloud-security"></span>
<span class="icon-class">pficon-cloud-security</span>
</li>
<li>
<span class="pficon pficon-cloud-tenant"></span>
<span class="icon-class">pficon-cloud-tenant</span>
</li>
<li>
<span class="pficon pficon-cluster"></span>
<span class="icon-class">pficon-cluster</span>
</li>
<li>
<span class="pficon pficon-connected"></span>
<span class="icon-class">pficon-connected</span>
</li>
<li>
<span class="pficon pficon-container-node"></span>
<span class="icon-class">pficon-container-node</span>
</li>
<li>
<span class="pficon pficon-cpu"></span>
<span class="icon-class">pficon-cpu</span>
</li>
<li>
<span class="pficon pficon-chat"></span>
<span class="icon-class">pficon-chat</span>
</li>
<li>
<span class="pficon pficon-degraded"></span>
<span class="icon-class">pficon-degraded</span>
</li>
<li>
<span class="pficon pficon-delete"></span>
<span class="icon-class">pficon-delete</span>
</li>
<li>
<span class="pficon pficon-disconnected"></span>
<span class="icon-class">pficon-disconnected</span>
</li>
<li>
<span class="pficon pficon-domain"></span>
<span class="icon-class">pficon-domain</span>
</li>
<li>
<span class="pficon pficon-edit"></span>
<span class="icon-class">pficon-edit</span>
</li>
<li>
<span class="pficon pficon-enhancement"></span>
<span class="icon-class">pficon-enhancement</span>
</li>
<li>
<span class="pficon pficon-enterprise"></span>
<span class="icon-class">pficon-enterprise</span>
</li>
<li>
<span class="pficon pficon-equalizer"></span>
<span class="icon-class">pficon-equalizer</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-flavor"></span>
<span class="icon-class">pficon-flavor</span>
</li>
<li>
<span class="pficon pficon-filter"></span>
<span class="icon-class">pficon-filter</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-in-progress"></span>
<span class="icon-class">pficon-in-progress</span>
</li>
<li>
<span class="pficon pficon-info"></span>
<span class="icon-class">pficon-info</span>
</li>
<li>
<span class="pficon pficon-infrastructure"></span>
<span class="icon-class">pficon-infrastructure</span>
</li>
<li>
<span class="pficon pficon-integration"></span>
<span class="icon-class">pficon-integration</span>
</li>
<li>
<span class="pficon pficon-key"></span>
<span class="icon-class">pficon-key</span>
</li>
<li>
<span class="pficon pficon-locked"></span>
<span class="icon-class">pficon-locked</span>
</li>
<li>
<span class="pficon pficon-maintenance"></span>
<span class="icon-class">pficon-maintenance</span>
</li>
<li>
<span class="pficon pficon-memory"></span>
<span class="icon-class">pficon-memory</span>
</li>
<li>
<span class="pficon pficon-migration"></span>
<span class="icon-class">pficon-migration</span>
</li>
<li>
<span class="pficon pficon-monitoring"></span>
<span class="icon-class">pficon-monitoring</span>
</li>
<li>
<span class="pficon pficon-middleware"></span>
<span class="icon-class">pficon-middleware</span>
</li>
<li>
<span class="pficon pficon-network-range"></span>
<span class="icon-class">pficon-network-range</span>
</li>
<li>
<span class="pficon pficon-network"></span>
<span class="icon-class">pficon-network</span>
</li>
<li>
<span class="pficon pficon-off"></span>
<span class="icon-class">pficon-off</span>
</li>
<li>
<span class="pficon pficon-ok"></span>
<span class="icon-class">pficon-ok</span>
</li>
<li>
<span class="pficon pficon-on"></span>
<span class="icon-class">pficon-on</span>
</li>
<li>
<span class="pficon pficon-on-running"></span>
<span class="icon-class">pficon-on-running</span>
</li>
<li>
<span class="pficon pficon-optimize"></span>
<span class="icon-class">pficon-optimize</span>
</li>
<li>
<span class="pficon pficon-orders"></span>
<span class="icon-class">pficon-orders</span>
</li>
<li>
<span class="pficon pficon-paused"></span>
<span class="icon-class">pficon-paused</span>
</li>
<li>
<span class="pficon pficon-pending"></span>
<span class="icon-class">pficon-pending</span>
</li>
<li>
<span class="pficon pficon-plugged"></span>
<span class="icon-class">pficon-plugged</span>
</li>
<li>
<span class="pficon pficon-port"></span>
<span class="icon-class">pficon-port</span>
</li>
<li>
<span class="pficon pficon-print"></span>
<span class="icon-class">pficon-print</span>
</li>
<li>
<span class="pficon pficon-process-automation"></span>
<span class="icon-class">pficon-process-automation</span>
</li>
<li>
<span class="pficon pficon-private"></span>
<span class="icon-class">pficon-private</span>
</li>
<li>
<span class="pficon pficon-project"></span>
<span class="icon-class">pficon-project</span>
</li>
<li>
<span class="pficon pficon-rebalance"></span>
<span class="icon-class">pficon-rebalance</span>
</li>
<li>
<span class="pficon pficon-regions"></span>
<span class="icon-class">pficon-regions</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-repository"></span>
<span class="icon-class">pficon-repository</span>
</li>
<li>
<span class="pficon pficon-resource-pool"></span>
<span class="icon-class">pficon-resource-pool</span>
</li>
<li>
<span class="pficon pficon-resources-almost-empty"></span>
<span class="icon-class">pficon-resources-almost-empty</span>
</li>
<li>
<span class="pficon pficon-resources-almost-full"></span>
<span class="icon-class">pficon-resources-almost-full</span>
</li>
<li>
<span class="pficon pficon-resources-full"></span>
<span class="icon-class">pficon-resources-full</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-satellite"></span>
<span class="icon-class">pficon-satellite</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-search"></span>
<span class="icon-class">pficon-search</span>
</li>
<li>
<span class="pficon pficon-security"></span>
<span class="icon-class">pficon-security</span>
</li>
<li>
<span class="pficon pficon-server"></span>
<span class="icon-class">pficon-server</span>
</li>
<li>
<span class="pficon pficon-server-group"></span>
<span class="icon-class">pficon-server-group</span>
</li>
<li>
<span class="pficon pficon-service"></span>
<span class="icon-class">pficon-service</span>
</li>
<li>
<span class="pficon pficon-service-catalog"></span>
<span class="icon-class">pficon-service-catalog</span>
</li>
<li>
<span class="pficon pficon-services"></span>
<span class="icon-class">pficon-services</span>
</li>
<li>
<span class="pficon pficon-settings"></span>
<span class="icon-class">pficon-settings</span>
</li>
<li>
<span class="pficon pficon-spinner"></span>
<span class="icon-class">pficon-spinner</span>
</li>
<li>
<span class="pficon pficon-storage-domain"></span>
<span class="icon-class">pficon-storage-domain</span>
</li>
<li>
<span class="pficon pficon-template"></span>
<span class="icon-class">pficon-template</span>
</li>
<li>
<span class="pficon pficon-tenant"></span>
<span class="icon-class">pficon-tenant</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-trend-down"></span>
<span class="icon-class">pficon-trend-down</span>
</li>
<li>
<span class="pficon pficon-trend-up"></span>
<span class="icon-class">pficon-trend-up</span>
</li>
<li>
<span class="pficon pficon-unknown"></span>
<span class="icon-class">pficon-unknown</span>
</li>
<li>
<span class="pficon pficon-unlocked"></span>
<span class="icon-class">pficon-unlocked</span>
</li>
<li>
<span class="pficon pficon-unplugged"></span>
<span class="icon-class">pficon-unplugged</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-vcenter"></span>
<span class="icon-class">pficon-vcenter</span>
</li>
<li>
<span class="pficon pficon-virtual-machine"></span>
<span class="icon-class">pficon-virtual-machine</span>
</li>
<li>
<span class="pficon pficon-volume"></span>
<span class="icon-class">pficon-volume</span>
</li>
<li>
<span class="pficon pficon-warning-triangle-o"></span>
<span class="icon-class">pficon-warning-triangle-o</span>
</li>
<li>
<span class="pficon pficon-zone"></span>
<span class="icon-class">pficon-zone</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-arrow-circle-o-up"></span>
<span class="icon-class">fa-arrow-circle-o-up</span>
</li>
<li>
<span class="fa fa-ban"></span>
<span class="icon-class">fa-ban</span>
</li>
<li>
<span class="fa fa-book"></span>
<span class="icon-class">fa-book</span>
</li>
<li>
<span class="fa fa-briefcase"></span>
<span class="icon-class">fa-briefcase</span>
</li>
<li>
<span class="fa fa-bug"></span>
<span class="icon-class">fa-bug</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-cogs"></span>
<span class="icon-class">fa-cogs</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-database"></span>
<span class="icon-class">fa-database</span>
</li>
<li>
<span class="fa fa-envelope"></span>
<span class="icon-class">fa-envelope</span>
</li>
<li>
<span class="fa fa-gears"></span>
<span class="icon-class">fa-gears</span>
</li>
<li>
<span class="fa fa-heartbeat"></span>
<span class="icon-class">fa-heartbeat</span>
</li>
<li>
<span class="fa fa-lightbulb-o"></span>
<span class="icon-class">fa-lightbulb-o</span>
</li>
<li>
<span class="fa fa-line-chart"></span>
<span class="icon-class">fa-line-chart</span>
</li>
<li>
<span class="fa fa-clock-o"></span>
<span class="icon-class">fa-cogs</span>
</li>
<li>
<span class="fa fa-map-marker"></span>
<span class="icon-class">fa-map-marker</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-plus-square"></span>
<span class="icon-class">fa-plus-square</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-shield"></span>
<span class="icon-class">fa-shield</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-wrench"></span>
<span class="icon-class">fa-wrench</span>
</li>
</ul>
</div>
</div>
</div><!-- /container -->
</body>
</html>