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.
306 lines (305 loc) • 12.4 kB
HTML
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html>
<!--<![endif]-->
<head>
<title>Icons - PatternFly</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../dist/img/favicon.ico">
<!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../dist/img/apple-touch-icon-precomposed-152.png">
<!-- iPad retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../dist/img/apple-touch-icon-precomposed-144.png">
<!-- iPad non-retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../dist/img/apple-touch-icon-precomposed-76.png">
<!-- iPad non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../dist/img/apple-touch-icon-precomposed-72.png">
<!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../dist/img/apple-touch-icon-precomposed-180.png">
<!-- iPhone retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../dist/img/apple-touch-icon-precomposed-114.png">
<!-- iPhone non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../dist/img/apple-touch-icon-precomposed-57.png">
<link href="../dist/css/patternfly.min.css" rel="stylesheet" media="screen, print">
<link href="../dist/css/patternfly-additions.min.css" rel="stylesheet" media="screen, print">
<link href="tests.css" rel="stylesheet" media="screen, print">
<script src="../components/jquery/dist/jquery.min.js"></script>
<script src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../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-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>
</div><!-- /container -->
</body>
</html>