Included component for an icon with a circle around it, in small, med…

…ium and large sizes.

source/_patterns/basics/03-icons/00-icon-circle.hbs

@@ -0,0 +1,3 @@
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-sm" }}
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-md" }}
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-lg" }}

source/_patterns/basics/03-icons/00-icon-circle.md

@@ -0,0 +1,16 @@
+---
+title: PatternFly Icon with Circle Decorator
+---
+
+## Overview
+
+Some PatternFly patterns display an icon with a circle arount it. For example, in the [list view](http://www.patternfly.org/pattern-library/content-views/list-view/#/api) or [card view](http://www.patternfly.org/pattern-library/content-views/card-view/#/api).
+
+
+## Usage
+
+| Class | Usage |
+| -- | -- |
+| `.pficon-circle-sm` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays a small icon with a circle around it  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |
+| `.pficon-circle-md` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays a medium icon with a circle around it  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |
+| `.pficon-circle-lg` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays a small icon with a circle around it  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |

source/_patterns/basics/03-icons/00-icon.hbs

@@ -1 +1 @@
-<span class="{{ iconFamily }} {{ iconName }}"></span>
+<span class="{{ iconFamily }} {{ iconName }} {{iconDecoration}}"></span>

source/scss/_pf-basic-icons.scss

@@ -219,3 +219,23 @@
 .#{$pf-icon-prefix}-zone:before {
   content: $pficon-var-zone;
 }
+
+@mixin pficon-circle($width-height, $font-size, $line-height) {
+  width: $width-height;
+  height: $width-height;
+  font-size: $font-size;
+  line-height: $line-height;
+  text-align: center;
+  border: 2px solid $color-pf-blue-300;
+  border-radius: 50%;
+}
+// line-height value should be 4px less than width-height value to accommodate 2px border on each side
+.pficon-circle-lg {
+  @include pficon-circle(106px, 46px, 102px);
+}
+.pficon-circle-md {
+  @include pficon-circle(54px, 23px, 50px);
+}
+.pficon-circle-sm {
+  @include pficon-circle(calc(2rem + 4px), $font-size-relative-base, 2rem);
+}