Start line:  
End line:  

Snippet Preview

Snippet HTML Code

Stack Overflow Questions
<div ng-controller="UI.IconTestController">

  <script type="text/ng-template" id="example-html">


/* Define icon sizes in CSS
   use the 'class' attribute
   to handle icons that are
   wider than they are tall */
.icon-example i:before,
.icon-example img {
  vertical-align: middle;
  line-height: 32px;
  font-size: 32px;
  height: 32px;
  width: auto;

.icon-example img.girthy {
  height: auto;
  width: 32px;

<!-- Here we turn an array of
     simple objects into icons! -->
<ul class="icon-example inline">
  <li ng-repeat="icon in icons">
    <hawtio-icon config="icon"></hawtio-icon>

  <script type="text/ng-template" id="example-config-json">
  "title": "Awesome!",
  "src": "icon-thumbs-up"
  "title": "Apache Karaf",
  "type": "icon",
  "src": "icon-beaker"
  "title": "Fabric8",
  "type": "img",
  "src": "img/icons/fabric8_icon.svg"
  "title": "Apache Cassandra",
  "src": "img/icons/cassandra.svg",
  "class": "girthy"

  <div class="row-fluid">
    <p>A simple wrapper to handle arbitrarily using FontAwesome icons or images via a simple configuration</p>
    <p>The icon sizes are specified in CSS, we can also pass a 'class' field to the icon as well to handle icons that are wider than they are tall for certain layouts</p>
    <div hawtio-editor="exampleHtml" mode="html"></div>
    <p>Here we define the configuration for our icons, in this case we're just creating a simple array of icon definitions to show in a list</p>
    <div hawtio-editor="exampleConfigJson" mode="javascript"></div>
    <div class="directive-example">
      <div compile="exampleHtml"></div>

New to GrepCode? Check out our FAQ X