diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index c3892bb3e0..88e2e5e4ef 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '030f12e5',
+    'core.pkg.css' => 'c88bd7c6',
     'core.pkg.js' => '417722ff',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '12c11318',
@@ -103,14 +103,16 @@ return array(
     'rsrc/css/application/slowvote/slowvote.css' => '266df6a1',
     'rsrc/css/application/subscriptions/subscribers-list.css' => '5bb30c78',
     'rsrc/css/application/tokens/tokens.css' => '5f7bca25',
-    'rsrc/css/application/uiexample/example.css' => 'aa291bae',
+    'rsrc/css/application/uiexample/example.css' => 'd07a5869',
     'rsrc/css/core/core.css' => 'da26ddb2',
     'rsrc/css/core/remarkup.css' => '0923dbd6',
     'rsrc/css/core/syntax.css' => '3c18c1cb',
     'rsrc/css/core/z-index.css' => '0d89d53c',
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
-    'rsrc/css/font/font-glyphicons-halflings.css' => '87018f55',
+    'rsrc/css/font/font-awesome.css' => '62bc244d',
+    'rsrc/css/font/font-glyphicons-halflings.css' => '0c69dbc6',
     'rsrc/css/font/font-source-sans-pro.css' => '91d53463',
+    'rsrc/css/font/phui-font-icon-base.css' => 'cc5465ba',
     'rsrc/css/layout/phabricator-action-header-view.css' => 'c14dfc57',
     'rsrc/css/layout/phabricator-action-list-view.css' => '81383e25',
     'rsrc/css/layout/phabricator-crumbs-view.css' => '2d9db584',
@@ -130,7 +132,7 @@ return array(
     'rsrc/css/phui/phui-form-view.css' => '867463b4',
     'rsrc/css/phui/phui-form.css' => 'b78ec020',
     'rsrc/css/phui/phui-header-view.css' => '5b79f0ef',
-    'rsrc/css/phui/phui-icon.css' => '59b9e5b5',
+    'rsrc/css/phui/phui-icon.css' => '322274f9',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => 'ef8035b6',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
@@ -162,6 +164,9 @@ return array(
     'rsrc/css/sprite-projects.css' => '7578fa56',
     'rsrc/css/sprite-status.css' => '8bce1c97',
     'rsrc/css/sprite-tokens.css' => '1706b943',
+    'rsrc/externals/font/fontawesome/fontawesome-webfont.eot' => 'b676fe4f',
+    'rsrc/externals/font/fontawesome/fontawesome-webfont.ttf' => 'af66fc5c',
+    'rsrc/externals/font/fontawesome/fontawesome-webfont.woff' => 'c713570f',
     'rsrc/externals/font/glyphicons/glyphicons-halflings-regular.eot' => '282d455e',
     'rsrc/externals/font/glyphicons/glyphicons-halflings-regular.ttf' => 'b7c56991',
     'rsrc/externals/font/glyphicons/glyphicons-halflings-regular.woff' => 'bac768cd',
@@ -515,7 +520,8 @@ return array(
     'diffusion-icons-css' => '384a0f7d',
     'diffusion-source-css' => '66fdf661',
     'diviner-shared-css' => '38813222',
-    'font-glyphicons-halflings' => '87018f55',
+    'font-fontawesome' => '62bc244d',
+    'font-glyphicons-halflings' => '0c69dbc6',
     'font-source-sans-pro' => '91d53463',
     'global-drag-and-drop-css' => '697324ad',
     'harbormaster-css' => 'cec833b7',
@@ -716,7 +722,7 @@ return array(
     'phabricator-textareautils' => 'b3ec3cfc',
     'phabricator-tooltip' => '3915d490',
     'phabricator-transaction-view-css' => 'ce491938',
-    'phabricator-ui-example-css' => 'aa291bae',
+    'phabricator-ui-example-css' => 'd07a5869',
     'phabricator-uiexample-javelin-view' => 'd4a14807',
     'phabricator-uiexample-reactor-button' => '44524435',
     'phabricator-uiexample-reactor-checkbox' => '7ba325ee',
@@ -744,11 +750,12 @@ return array(
     'phui-calendar-month-css' => 'a92e47d2',
     'phui-document-view-css' => '3b078dc0',
     'phui-feed-story-css' => '3a59c2cf',
+    'phui-font-icon-base-css' => 'cc5465ba',
     'phui-fontkit-css' => 'de84aa4a',
     'phui-form-css' => 'b78ec020',
     'phui-form-view-css' => '867463b4',
     'phui-header-view-css' => '5b79f0ef',
-    'phui-icon-view-css' => '59b9e5b5',
+    'phui-icon-view-css' => '322274f9',
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => 'ef8035b6',
     'phui-object-box-css' => 'ce92d8ec',
diff --git a/src/applications/uiexample/examples/PHUIIconExample.php b/src/applications/uiexample/examples/PHUIIconExample.php
index f279d8cce4..2500ebfa9c 100644
--- a/src/applications/uiexample/examples/PHUIIconExample.php
+++ b/src/applications/uiexample/examples/PHUIIconExample.php
@@ -12,206 +12,580 @@ final class PHUIIconExample extends PhabricatorUIExample {
 
   private function listHalflings() {
     return array (
-      'glass',
-      'music',
-      'search',
-      'envelope',
-      'heart',
-      'star',
-      'star-empty',
-      'user',
-      'film',
-      'th-large',
-      'th',
-      'th-list',
-      'ok',
-      'remove',
-      'zoom-in',
-      'zoom-out',
-      'off',
-      'signal',
-      'cog',
-      'trash',
-      'home',
-      'file',
-      'time',
-      'road',
-      'download-alt',
-      'download',
-      'upload',
-      'inbox',
-      'play-circle',
-      'repeat',
-      'refresh',
-      'list-alt',
-      'lock',
-      'flag',
-      'headphones',
-      'volume-off',
-      'volume-down',
-      'volume-up',
-      'qrcode',
-      'barcode',
-      'tag',
-      'tags',
-      'book',
-      'bookmark',
-      'print',
-      'camera',
-      'font',
-      'bold',
-      'italic',
-      'text-height',
-      'text-width',
-      'align-left',
-      'align-center',
-      'align-right',
-      'align-justify',
-      'list',
-      'indent-left',
-      'indent-right',
-      'facetime-video',
-      'picture',
-      'pencil',
-      'map-marker',
-      'adjust',
-      'tint',
-      'edit',
-      'share',
-      'check',
-      'move',
-      'step-backward',
-      'fast-backward',
-      'backward',
-      'play',
-      'pause',
-      'stop',
-      'forward',
-      'fast-forward',
-      'step-forward',
-      'eject',
-      'chevron-left',
-      'chevron-right',
-      'plus-sign',
-      'minus-sign',
-      'remove-sign',
-      'ok-sign',
-      'question-sign',
-      'info-sign',
-      'screenshot',
-      'remove-circle',
-      'ok-circle',
-      'ban-circle',
-      'arrow-left',
-      'arrow-right',
-      'arrow-up',
-      'arrow-down',
-      'share-alt',
-      'resize-full',
-      'resize-small',
-      'plus',
-      'minus',
-      'asterisk',
-      'exclamation-sign',
-      'gift',
-      'leaf',
-      'fire',
-      'eye-open',
-      'eye-close',
-      'warning-sign',
-      'plane',
-      'calendar',
-      'random',
-      'comments',
-      'magnet',
-      'chevron-up',
-      'chevron-down',
-      'retweet',
-      'shopping-cart',
-      'folder-close',
-      'folder-open',
-      'resize-vertical',
-      'resize-horizontal',
-      'hdd',
-      'bullhorn',
-      'bell',
-      'certificate',
-      'thumbs-up',
-      'thumbs-down',
-      'hand-right',
-      'hand-left',
-      'hand-top',
-      'hand-down',
-      'circle-arrow-right',
-      'circle-arrow-left',
-      'circle-arrow-top',
-      'circle-arrow-down',
-      'globe',
-      'wrench',
-      'tasks',
-      'filter',
-      'briefcase',
-      'fullscreen',
-      'dashboard',
-      'paperclip',
-      'heart-empty',
-      'link',
-      'phone',
-      'pushpin',
-      'euro',
-      'usd',
-      'gbp',
-      'sort',
-      'sort-by-alphabet',
-      'sort-by-alphabet-alt',
-      'sort-by-order',
-      'sort-by-order-alt',
-      'sort-by-attributes',
-      'sort-by-attributes-alt',
-      'unchecked',
-      'expand',
-      'collapse',
-      'collapse-top',
-      'log_in',
-      'flash',
-      'log_out',
-      'new_window',
-      'record',
-      'save',
-      'open',
-      'saved',
-      'import',
-      'export',
-      'send',
-      'floppy_disk',
-      'floppy_saved',
-      'floppy_remove',
-      'floppy_save',
-      'floppy_open',
-      'credit_card',
-      'transfer',
-      'cutlery',
-      'header',
-      'compressed',
-      'earphone',
-      'phone_alt',
-      'tower',
-      'stats',
-      'sd_video',
-      'hd_video',
-      'subtitles',
-      'sound_stereo',
-      'sound_dolby',
-      'sound_5_1',
-      'sound_6_1',
-      'sound_7_1',
-      'copyright_mark',
-      'registration_mark',
-      'cloud',
-      'cloud_download',
-      'cloud_upload',
-      'tree_conifer',
-      'tree_deciduous',
+      'gh-glass',
+      'gh-music',
+      'gh-search',
+      'gh-envelope',
+      'gh-heart',
+      'gh-star',
+      'gh-star-empty',
+      'gh-user',
+      'gh-film',
+      'gh-th-large',
+      'gh-th',
+      'gh-th-list',
+      'gh-ok',
+      'gh-remove',
+      'gh-zoom-in',
+      'gh-zoom-out',
+      'gh-off',
+      'gh-signal',
+      'gh-cog',
+      'gh-trash',
+      'gh-home',
+      'gh-file',
+      'gh-time',
+      'gh-road',
+      'gh-download-alt',
+      'gh-download',
+      'gh-upload',
+      'gh-inbox',
+      'gh-play-circle',
+      'gh-repeat',
+      'gh-refresh',
+      'gh-list-alt',
+      'gh-lock',
+      'gh-flag',
+      'gh-headphones',
+      'gh-volume-off',
+      'gh-volume-down',
+      'gh-volume-up',
+      'gh-qrcode',
+      'gh-barcode',
+      'gh-tag',
+      'gh-tags',
+      'gh-book',
+      'gh-bookmark',
+      'gh-print',
+      'gh-camera',
+      'gh-font',
+      'gh-bold',
+      'gh-italic',
+      'gh-text-height',
+      'gh-text-width',
+      'gh-align-left',
+      'gh-align-center',
+      'gh-align-right',
+      'gh-align-justify',
+      'gh-list',
+      'gh-indent-left',
+      'gh-indent-right',
+      'gh-facetime-video',
+      'gh-picture',
+      'gh-pencil',
+      'gh-map-marker',
+      'gh-adjust',
+      'gh-tint',
+      'gh-edit',
+      'gh-share',
+      'gh-check',
+      'gh-move',
+      'gh-step-backward',
+      'gh-fast-backward',
+      'gh-backward',
+      'gh-play',
+      'gh-pause',
+      'gh-stop',
+      'gh-forward',
+      'gh-fast-forward',
+      'gh-step-forward',
+      'gh-eject',
+      'gh-chevron-left',
+      'gh-chevron-right',
+      'gh-plus-sign',
+      'gh-minus-sign',
+      'gh-remove-sign',
+      'gh-ok-sign',
+      'gh-question-sign',
+      'gh-info-sign',
+      'gh-screenshot',
+      'gh-remove-circle',
+      'gh-ok-circle',
+      'gh-ban-circle',
+      'gh-arrow-left',
+      'gh-arrow-right',
+      'gh-arrow-up',
+      'gh-arrow-down',
+      'gh-share-alt',
+      'gh-resize-full',
+      'gh-resize-small',
+      'gh-plus',
+      'gh-minus',
+      'gh-asterisk',
+      'gh-exclamation-sign',
+      'gh-gift',
+      'gh-leaf',
+      'gh-fire',
+      'gh-eye-open',
+      'gh-eye-close',
+      'gh-warning-sign',
+      'gh-plane',
+      'gh-calendar',
+      'gh-random',
+      'gh-comments',
+      'gh-magnet',
+      'gh-chevron-up',
+      'gh-chevron-down',
+      'gh-retweet',
+      'gh-shopping-cart',
+      'gh-folder-close',
+      'gh-folder-open',
+      'gh-resize-vertical',
+      'gh-resize-horizontal',
+      'gh-hdd',
+      'gh-bullhorn',
+      'gh-bell',
+      'gh-certificate',
+      'gh-thumbs-up',
+      'gh-thumbs-down',
+      'gh-hand-right',
+      'gh-hand-left',
+      'gh-hand-top',
+      'gh-hand-down',
+      'gh-circle-arrow-right',
+      'gh-circle-arrow-left',
+      'gh-circle-arrow-top',
+      'gh-circle-arrow-down',
+      'gh-globe',
+      'gh-wrench',
+      'gh-tasks',
+      'gh-filter',
+      'gh-briefcase',
+      'gh-fullscreen',
+      'gh-dashboard',
+      'gh-paperclip',
+      'gh-heart-empty',
+      'gh-link',
+      'gh-phone',
+      'gh-pushpin',
+      'gh-euro',
+      'gh-usd',
+      'gh-gbp',
+      'gh-sort',
+      'gh-sort-by-alphabet',
+      'gh-sort-by-alphabet-alt',
+      'gh-sort-by-order',
+      'gh-sort-by-order-alt',
+      'gh-sort-by-attributes',
+      'gh-sort-by-attributes-alt',
+      'gh-unchecked',
+      'gh-expand',
+      'gh-collapse',
+      'gh-collapse-top',
+      'gh-log_in',
+      'gh-flash',
+      'gh-log_out',
+      'gh-new_window',
+      'gh-record',
+      'gh-save',
+      'gh-open',
+      'gh-saved',
+      'gh-import',
+      'gh-export',
+      'gh-send',
+      'gh-floppy_disk',
+      'gh-floppy_saved',
+      'gh-floppy_remove',
+      'gh-floppy_save',
+      'gh-floppy_open',
+      'gh-credit_card',
+      'gh-transfer',
+      'gh-cutlery',
+      'gh-header',
+      'gh-compressed',
+      'gh-earphone',
+      'gh-phone_alt',
+      'gh-tower',
+      'gh-stats',
+      'gh-sd_video',
+      'gh-hd_video',
+      'gh-subtitles',
+      'gh-sound_stereo',
+      'gh-sound_dolby',
+      'gh-sound_5_1',
+      'gh-sound_6_1',
+      'gh-sound_7_1',
+      'gh-copyright_mark',
+      'gh-registration_mark',
+      'gh-cloud',
+      'gh-cloud_download',
+      'gh-cloud_upload',
+      'gh-tree_conifer',
+      'gh-tree_deciduous',
+    );
+  }
+
+  private function listFontAwesome() {
+    return array(
+      'fa-glass',
+      'fa-music',
+      'fa-search',
+      'fa-envelope-o',
+      'fa-heart',
+      'fa-star',
+      'fa-star-o',
+      'fa-user',
+      'fa-film',
+      'fa-th-large',
+      'fa-th',
+      'fa-th-list',
+      'fa-check',
+      'fa-times',
+      'fa-search-plus',
+      'fa-search-minus',
+      'fa-power-off',
+      'fa-signal',
+      'fa-cog',
+      'fa-trash-o',
+      'fa-home',
+      'fa-file-o',
+      'fa-clock-o',
+      'fa-road',
+      'fa-download',
+      'fa-arrow-circle-o-down',
+      'fa-arrow-circle-o-up',
+      'fa-inbox',
+      'fa-play-circle-o',
+      'fa-repeat',
+      'fa-refresh',
+      'fa-list-alt',
+      'fa-lock',
+      'fa-flag',
+      'fa-headphones',
+      'fa-volume-off',
+      'fa-volume-down',
+      'fa-volume-up',
+      'fa-qrcode',
+      'fa-barcode',
+      'fa-tag',
+      'fa-tags',
+      'fa-book',
+      'fa-bookmark',
+      'fa-print',
+      'fa-camera',
+      'fa-font',
+      'fa-bold',
+      'fa-italic',
+      'fa-text-height',
+      'fa-text-width',
+      'fa-align-left',
+      'fa-align-center',
+      'fa-align-right',
+      'fa-align-justify',
+      'fa-list',
+      'fa-outdent',
+      'fa-indent',
+      'fa-video-camera',
+      'fa-picture-o',
+      'fa-pencil',
+      'fa-map-marker',
+      'fa-adjust',
+      'fa-tint',
+      'fa-pencil-square-o',
+      'fa-share-square-o',
+      'fa-check-square-o',
+      'fa-arrows',
+      'fa-step-backward',
+      'fa-fast-backward',
+      'fa-backward',
+      'fa-play',
+      'fa-pause',
+      'fa-stop',
+      'fa-forward',
+      'fa-fast-forward',
+      'fa-step-forward',
+      'fa-eject',
+      'fa-chevron-left',
+      'fa-chevron-right',
+      'fa-plus-circle',
+      'fa-minus-circle',
+      'fa-times-circle',
+      'fa-check-circle',
+      'fa-question-circle',
+      'fa-info-circle',
+      'fa-crosshairs',
+      'fa-times-circle-o',
+      'fa-check-circle-o',
+      'fa-ban',
+      'fa-arrow-left',
+      'fa-arrow-right',
+      'fa-arrow-up',
+      'fa-arrow-down',
+      'fa-share',
+      'fa-expand',
+      'fa-compress',
+      'fa-plus',
+      'fa-minus',
+      'fa-asterisk',
+      'fa-exclamation-circle',
+      'fa-gift',
+      'fa-leaf',
+      'fa-fire',
+      'fa-eye',
+      'fa-eye-slash',
+      'fa-exclamation-triangle',
+      'fa-plane',
+      'fa-calendar',
+      'fa-random',
+      'fa-comment',
+      'fa-magnet',
+      'fa-chevron-up',
+      'fa-chevron-down',
+      'fa-retweet',
+      'fa-shopping-cart',
+      'fa-folder',
+      'fa-folder-open',
+      'fa-arrows-v',
+      'fa-arrows-h',
+      'fa-bar-chart-o',
+      'fa-twitter-square',
+      'fa-facebook-square',
+      'fa-camera-retro',
+      'fa-key',
+      'fa-cogs',
+      'fa-comments',
+      'fa-thumbs-o-up',
+      'fa-thumbs-o-down',
+      'fa-star-half',
+      'fa-heart-o',
+      'fa-sign-out',
+      'fa-linkedin-square',
+      'fa-thumb-tack',
+      'fa-external-link',
+      'fa-sign-in',
+      'fa-trophy',
+      'fa-github-square',
+      'fa-upload',
+      'fa-lemon-o',
+      'fa-phone',
+      'fa-square-o',
+      'fa-bookmark-o',
+      'fa-phone-square',
+      'fa-twitter',
+      'fa-facebook',
+      'fa-github',
+      'fa-unlock',
+      'fa-credit-card',
+      'fa-rss',
+      'fa-hdd-o',
+      'fa-bullhorn',
+      'fa-bell',
+      'fa-certificate',
+      'fa-hand-o-right',
+      'fa-hand-o-left',
+      'fa-hand-o-up',
+      'fa-hand-o-down',
+      'fa-arrow-circle-left',
+      'fa-arrow-circle-right',
+      'fa-arrow-circle-up',
+      'fa-arrow-circle-down',
+      'fa-globe',
+      'fa-wrench',
+      'fa-tasks',
+      'fa-filter',
+      'fa-briefcase',
+      'fa-arrows-alt',
+      'fa-users',
+      'fa-link',
+      'fa-cloud',
+      'fa-flask',
+      'fa-scissors',
+      'fa-files-o',
+      'fa-paperclip',
+      'fa-floppy-o',
+      'fa-square',
+      'fa-bars',
+      'fa-list-ul',
+      'fa-list-ol',
+      'fa-strikethrough',
+      'fa-underline',
+      'fa-table',
+      'fa-magic',
+      'fa-truck',
+      'fa-pinterest',
+      'fa-pinterest-square',
+      'fa-google-plus-square',
+      'fa-google-plus',
+      'fa-money',
+      'fa-caret-down',
+      'fa-caret-up',
+      'fa-caret-left',
+      'fa-caret-right',
+      'fa-columns',
+      'fa-sort',
+      'fa-sort-asc',
+      'fa-sort-desc',
+      'fa-envelope',
+      'fa-linkedin',
+      'fa-undo',
+      'fa-gavel',
+      'fa-tachometer',
+      'fa-comment-o',
+      'fa-comments-o',
+      'fa-bolt',
+      'fa-sitemap',
+      'fa-umbrella',
+      'fa-clipboard',
+      'fa-lightbulb-o',
+      'fa-exchange',
+      'fa-cloud-download',
+      'fa-cloud-upload',
+      'fa-user-md',
+      'fa-stethoscope',
+      'fa-suitcase',
+      'fa-bell-o',
+      'fa-coffee',
+      'fa-cutlery',
+      'fa-file-text-o',
+      'fa-building-o',
+      'fa-hospital-o',
+      'fa-ambulance',
+      'fa-medkit',
+      'fa-fighter-jet',
+      'fa-beer',
+      'fa-h-square',
+      'fa-plus-square',
+      'fa-angle-double-left',
+      'fa-angle-double-right',
+      'fa-angle-double-up',
+      'fa-angle-double-down',
+      'fa-angle-left',
+      'fa-angle-right',
+      'fa-angle-up',
+      'fa-angle-down',
+      'fa-desktop',
+      'fa-laptop',
+      'fa-tablet',
+      'fa-mobile',
+      'fa-circle-o',
+      'fa-quote-left',
+      'fa-quote-right',
+      'fa-spinner',
+      'fa-circle',
+      'fa-reply',
+      'fa-github-alt',
+      'fa-folder-o',
+      'fa-folder-open-o',
+      'fa-smile-o',
+      'fa-frown-o',
+      'fa-meh-o',
+      'fa-gamepad',
+      'fa-keyboard-o',
+      'fa-flag-o',
+      'fa-flag-checkered',
+      'fa-terminal',
+      'fa-code',
+      'fa-reply-all',
+      'fa-mail-reply-all',
+      'fa-star-half-o',
+      'fa-location-arrow',
+      'fa-crop',
+      'fa-code-fork',
+      'fa-chain-broken',
+      'fa-question',
+      'fa-info',
+      'fa-exclamation',
+      'fa-superscript',
+      'fa-subscript',
+      'fa-eraser',
+      'fa-puzzle-piece',
+      'fa-microphone',
+      'fa-microphone-slash',
+      'fa-shield',
+      'fa-calendar-o',
+      'fa-fire-extinguisher',
+      'fa-rocket',
+      'fa-maxcdn',
+      'fa-chevron-circle-left',
+      'fa-chevron-circle-right',
+      'fa-chevron-circle-up',
+      'fa-chevron-circle-down',
+      'fa-html5',
+      'fa-css3',
+      'fa-anchor',
+      'fa-unlock-alt',
+      'fa-bullseye',
+      'fa-ellipsis-h',
+      'fa-ellipsis-v',
+      'fa-rss-square',
+      'fa-play-circle',
+      'fa-ticket',
+      'fa-minus-square',
+      'fa-minus-square-o',
+      'fa-level-up',
+      'fa-level-down',
+      'fa-check-square',
+      'fa-pencil-square',
+      'fa-external-link-square',
+      'fa-share-square',
+      'fa-compass',
+      'fa-caret-square-o-down',
+      'fa-caret-square-o-up',
+      'fa-caret-square-o-right',
+      'fa-eur',
+      'fa-gbp',
+      'fa-usd',
+      'fa-inr',
+      'fa-jpy',
+      'fa-rub',
+      'fa-krw',
+      'fa-btc',
+      'fa-file',
+      'fa-file-text',
+      'fa-sort-alpha-asc',
+      'fa-sort-alpha-desc',
+      'fa-sort-amount-asc',
+      'fa-sort-amount-desc',
+      'fa-sort-numeric-asc',
+      'fa-sort-numeric-desc',
+      'fa-thumbs-up',
+      'fa-thumbs-down',
+      'fa-youtube-square',
+      'fa-youtube',
+      'fa-xing',
+      'fa-xing-square',
+      'fa-youtube-play',
+      'fa-dropbox',
+      'fa-stack-overflow',
+      'fa-instagram',
+      'fa-flickr',
+      'fa-adn',
+      'fa-bitbucket',
+      'fa-bitbucket-square',
+      'fa-tumblr',
+      'fa-tumblr-square',
+      'fa-long-arrow-down',
+      'fa-long-arrow-up',
+      'fa-long-arrow-left',
+      'fa-long-arrow-right',
+      'fa-apple',
+      'fa-windows',
+      'fa-android',
+      'fa-linux',
+      'fa-dribbble',
+      'fa-skype',
+      'fa-foursquare',
+      'fa-trello',
+      'fa-female',
+      'fa-male',
+      'fa-gittip',
+      'fa-sun-o',
+      'fa-moon-o',
+      'fa-archive',
+      'fa-bug',
+      'fa-vk',
+      'fa-weibo',
+      'fa-renren',
+      'fa-pagelines',
+      'fa-stack-exchange',
+      'fa-arrow-circle-o-right',
+      'fa-arrow-circle-o-left',
+      'fa-caret-square-o-left',
+      'fa-dot-circle-o',
+      'fa-wheelchair',
+      'fa-vimeo-square',
+      'fa-try',
+      'fa-plus-square-o',
     );
   }
 
@@ -228,26 +602,50 @@ final class PHUIIconExample extends PhabricatorUIExample {
       'sky',
       'indigo',
       'violet',
+      'lightgreytext',
+      'lightbluetext',
+    );
+  }
+
+  private function listTransforms() {
+    return array(
+      'ph-rotate-90',
+      'ph-rotate-180',
+      'ph-rotate-270',
+      'ph-flip-horizontal',
+      'ph-flip-vertical',
+      'ph-spin',
     );
   }
 
   public function renderExample() {
 
     $colors = $this->listColors();
+    $trans = $this->listTransforms();
     $glyphs = $this->listHalflings();
+    $fas = $this->listFontAwesome();
+
     $gicons = array();
     foreach ($glyphs as $glyph) {
       $gicons[] = id(new PHUIIconView())
-        ->addClass('phui-halfling-name')
+        ->addClass('phui-example-icon-name')
         ->setHalfling($glyph)
-        ->appendChild($glyph);
+        ->setText($glyph);
     }
     $cicons = array();
     foreach ($colors as $color) {
       $cicons[] = id(new PHUIIconView())
-        ->addClass('phui-halfling-color')
-        ->setHalfling('tag', $color)
-        ->appendChild(pht('tag %s', $color));
+        ->addClass('phui-example-icon-transform')
+        ->setHalfling('gh-tag '.$color)
+        ->setText(pht('gh-tag %s', $color));
+    }
+    $ficons = array();
+    foreach ($fas as $fa) {
+
+      $ficons[] = id(new PHUIIconView())
+        ->addClass('phui-example-icon-name')
+        ->setFontAwesome($fa)
+        ->setText($fa);
     }
 
     $person1 = new PHUIIconView();
@@ -360,6 +758,10 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->appendChild($cicons)
       ->addMargin(PHUI::MARGIN_LARGE);
 
+    $layout_fa = id(new PHUIBoxView())
+      ->appendChild($ficons)
+      ->addMargin(PHUI::MARGIN_LARGE);
+
     $layout1 = id(new PHUIBoxView())
       ->appendChild($actionview)
       ->addMargin(PHUI::MARGIN_MEDIUM);
@@ -388,8 +790,12 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->setHeaderText(pht('Glyphicon Halflings'))
       ->appendChild($layout_gicons);
 
-    $halflings_color = id(new PHUIObjectBoxView())
-      ->setHeaderText(pht('Halflings Colors'))
+    $fontawesome = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Font Awesome'))
+      ->appendChild($layout_fa);
+
+    $transforms = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Colors and Transforms'))
       ->appendChild($layout_cicons);
 
     $wrap1 = id(new PHUIObjectBoxView())
@@ -419,7 +825,8 @@ final class PHUIIconExample extends PhabricatorUIExample {
         ),
         array(
           $halflings,
-          $halflings_color,
+          $fontawesome,
+          $transforms,
           $wrap1,
           $wrap2,
           $wrap3,
diff --git a/src/view/phui/PHUIIconView.php b/src/view/phui/PHUIIconView.php
index a10e8a3458..a2ffa8b748 100644
--- a/src/view/phui/PHUIIconView.php
+++ b/src/view/phui/PHUIIconView.php
@@ -18,12 +18,13 @@ final class PHUIIconView extends AphrontTagView {
 
   private $href = null;
   private $image;
+  private $text;
   private $headSize = null;
 
   private $spriteIcon;
   private $spriteSheet;
   private $halfling;
-  private $halflingColor;
+  private $fontAwesome;
 
   public function setHref($href) {
     $this->href = $href;
@@ -35,6 +36,11 @@ final class PHUIIconView extends AphrontTagView {
     return $this;
   }
 
+  public function setText($text) {
+    $this->text = $text;
+    return $this;
+  }
+
   public function setHeadSize($size) {
     $this->headSize = $size;
     return $this;
@@ -50,9 +56,13 @@ final class PHUIIconView extends AphrontTagView {
     return $this;
   }
 
-  public function setHalfling($hf, $color=null) {
+  public function setHalfling($hf) {
     $this->halfling = $hf;
-    $this->halflingColor = $color;
+    return $this;
+  }
+
+  public function setFontAwesome($fa) {
+    $this->fontAwesome = $fa;
     return $this;
   }
 
@@ -75,13 +85,19 @@ final class PHUIIconView extends AphrontTagView {
       require_celerity_resource('sprite-'.$this->spriteSheet.'-css');
       $classes[] = 'sprite-'.$this->spriteSheet;
       $classes[] = $this->spriteSheet.'-'.$this->spriteIcon;
+
     } elseif ($this->halfling) {
+      require_celerity_resource('phui-font-icon-base-css');
       require_celerity_resource('font-glyphicons-halflings');
-      $classes[] = 'halflings';
+      $classes[] = 'phui-font-gh';
       $classes[] = $this->halfling;
-      if ($this->halflingColor) {
-        $classes[] = $this->halflingColor;
-      }
+
+    } elseif ($this->fontAwesome) {
+      require_celerity_resource('phui-font-icon-base-css');
+      require_celerity_resource('font-fontawesome');
+      $classes[] = 'phui-font-fa';
+      $classes[] = $this->fontAwesome;
+
     } else {
       if ($this->headSize) {
         $classes[] = $this->headSize;
@@ -89,6 +105,11 @@ final class PHUIIconView extends AphrontTagView {
       $style = 'background-image: url('.$this->image.');';
     }
 
+    if ($this->text) {
+      $classes[] = 'phui-icon-has-text';
+      $this->appendChild($this->text);
+    }
+
     return array(
       'href' => $this->href,
       'style' => $style,
diff --git a/webroot/rsrc/css/application/uiexample/example.css b/webroot/rsrc/css/application/uiexample/example.css
index f90af4c507..a337e21064 100644
--- a/webroot/rsrc/css/application/uiexample/example.css
+++ b/webroot/rsrc/css/application/uiexample/example.css
@@ -46,14 +46,14 @@
   border-color: {$red};
 }
 
-.phui-icon-view.phui-halfling-name {
+.phui-example-icon-name {
   display: inline-block;
-  width: 140px;
+  width: 160px;
   padding-bottom: 8px;
   white-space: nowrap;
 }
 
-.phui-icon-view.phui-halfling-color {
+.phui-icon-view.phui-example-icon-transform {
   display: block;
   padding-bottom: 8px;
 }
diff --git a/webroot/rsrc/css/font/font-awesome.css b/webroot/rsrc/css/font/font-awesome.css
new file mode 100644
index 0000000000..335686262a
--- /dev/null
+++ b/webroot/rsrc/css/font/font-awesome.css
@@ -0,0 +1,1187 @@
+/**
+ * @provides font-fontawesome
+ */
+
+/*
+ *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('/rsrc/externals/font/fontawesome/fontawesome-webfont.eot?v=4.0.3');
+  src: url('/rsrc/externals/font/fontawesome/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('/rsrc/externals/font/fontawesome/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('/rsrc/externals/font/fontawesome/fontawesome-webfont.ttf?v=4.0.3') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+.phui-font-fa {
+  font-family: FontAwesome;
+}
+
+/* makes the font 33% larger relative to the icon container */
+.fa-lg {
+  font-size: 1.3333333333333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
+}
+.fa-2x {
+  font-size: 2em;
+}
+.fa-3x {
+  font-size: 3em;
+}
+.fa-4x {
+  font-size: 4em;
+}
+.fa-5x {
+  font-size: 5em;
+}
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
+.fa-glass:before {
+  content: "\f000";
+}
+.fa-music:before {
+  content: "\f001";
+}
+.fa-search:before {
+  content: "\f002";
+}
+.fa-envelope-o:before {
+  content: "\f003";
+}
+.fa-heart:before {
+  content: "\f004";
+}
+.fa-star:before {
+  content: "\f005";
+}
+.fa-star-o:before {
+  content: "\f006";
+}
+.fa-user:before {
+  content: "\f007";
+}
+.fa-film:before {
+  content: "\f008";
+}
+.fa-th-large:before {
+  content: "\f009";
+}
+.fa-th:before {
+  content: "\f00a";
+}
+.fa-th-list:before {
+  content: "\f00b";
+}
+.fa-check:before {
+  content: "\f00c";
+}
+.fa-times:before {
+  content: "\f00d";
+}
+.fa-search-plus:before {
+  content: "\f00e";
+}
+.fa-search-minus:before {
+  content: "\f010";
+}
+.fa-power-off:before {
+  content: "\f011";
+}
+.fa-signal:before {
+  content: "\f012";
+}
+.fa-gear:before,
+.fa-cog:before {
+  content: "\f013";
+}
+.fa-trash-o:before {
+  content: "\f014";
+}
+.fa-home:before {
+  content: "\f015";
+}
+.fa-file-o:before {
+  content: "\f016";
+}
+.fa-clock-o:before {
+  content: "\f017";
+}
+.fa-road:before {
+  content: "\f018";
+}
+.fa-download:before {
+  content: "\f019";
+}
+.fa-arrow-circle-o-down:before {
+  content: "\f01a";
+}
+.fa-arrow-circle-o-up:before {
+  content: "\f01b";
+}
+.fa-inbox:before {
+  content: "\f01c";
+}
+.fa-play-circle-o:before {
+  content: "\f01d";
+}
+.fa-rotate-right:before,
+.fa-repeat:before {
+  content: "\f01e";
+}
+.fa-refresh:before {
+  content: "\f021";
+}
+.fa-list-alt:before {
+  content: "\f022";
+}
+.fa-lock:before {
+  content: "\f023";
+}
+.fa-flag:before {
+  content: "\f024";
+}
+.fa-headphones:before {
+  content: "\f025";
+}
+.fa-volume-off:before {
+  content: "\f026";
+}
+.fa-volume-down:before {
+  content: "\f027";
+}
+.fa-volume-up:before {
+  content: "\f028";
+}
+.fa-qrcode:before {
+  content: "\f029";
+}
+.fa-barcode:before {
+  content: "\f02a";
+}
+.fa-tag:before {
+  content: "\f02b";
+}
+.fa-tags:before {
+  content: "\f02c";
+}
+.fa-book:before {
+  content: "\f02d";
+}
+.fa-bookmark:before {
+  content: "\f02e";
+}
+.fa-print:before {
+  content: "\f02f";
+}
+.fa-camera:before {
+  content: "\f030";
+}
+.fa-font:before {
+  content: "\f031";
+}
+.fa-bold:before {
+  content: "\f032";
+}
+.fa-italic:before {
+  content: "\f033";
+}
+.fa-text-height:before {
+  content: "\f034";
+}
+.fa-text-width:before {
+  content: "\f035";
+}
+.fa-align-left:before {
+  content: "\f036";
+}
+.fa-align-center:before {
+  content: "\f037";
+}
+.fa-align-right:before {
+  content: "\f038";
+}
+.fa-align-justify:before {
+  content: "\f039";
+}
+.fa-list:before {
+  content: "\f03a";
+}
+.fa-dedent:before,
+.fa-outdent:before {
+  content: "\f03b";
+}
+.fa-indent:before {
+  content: "\f03c";
+}
+.fa-video-camera:before {
+  content: "\f03d";
+}
+.fa-picture-o:before {
+  content: "\f03e";
+}
+.fa-pencil:before {
+  content: "\f040";
+}
+.fa-map-marker:before {
+  content: "\f041";
+}
+.fa-adjust:before {
+  content: "\f042";
+}
+.fa-tint:before {
+  content: "\f043";
+}
+.fa-edit:before,
+.fa-pencil-square-o:before {
+  content: "\f044";
+}
+.fa-share-square-o:before {
+  content: "\f045";
+}
+.fa-check-square-o:before {
+  content: "\f046";
+}
+.fa-arrows:before {
+  content: "\f047";
+}
+.fa-step-backward:before {
+  content: "\f048";
+}
+.fa-fast-backward:before {
+  content: "\f049";
+}
+.fa-backward:before {
+  content: "\f04a";
+}
+.fa-play:before {
+  content: "\f04b";
+}
+.fa-pause:before {
+  content: "\f04c";
+}
+.fa-stop:before {
+  content: "\f04d";
+}
+.fa-forward:before {
+  content: "\f04e";
+}
+.fa-fast-forward:before {
+  content: "\f050";
+}
+.fa-step-forward:before {
+  content: "\f051";
+}
+.fa-eject:before {
+  content: "\f052";
+}
+.fa-chevron-left:before {
+  content: "\f053";
+}
+.fa-chevron-right:before {
+  content: "\f054";
+}
+.fa-plus-circle:before {
+  content: "\f055";
+}
+.fa-minus-circle:before {
+  content: "\f056";
+}
+.fa-times-circle:before {
+  content: "\f057";
+}
+.fa-check-circle:before {
+  content: "\f058";
+}
+.fa-question-circle:before {
+  content: "\f059";
+}
+.fa-info-circle:before {
+  content: "\f05a";
+}
+.fa-crosshairs:before {
+  content: "\f05b";
+}
+.fa-times-circle-o:before {
+  content: "\f05c";
+}
+.fa-check-circle-o:before {
+  content: "\f05d";
+}
+.fa-ban:before {
+  content: "\f05e";
+}
+.fa-arrow-left:before {
+  content: "\f060";
+}
+.fa-arrow-right:before {
+  content: "\f061";
+}
+.fa-arrow-up:before {
+  content: "\f062";
+}
+.fa-arrow-down:before {
+  content: "\f063";
+}
+.fa-mail-forward:before,
+.fa-share:before {
+  content: "\f064";
+}
+.fa-expand:before {
+  content: "\f065";
+}
+.fa-compress:before {
+  content: "\f066";
+}
+.fa-plus:before {
+  content: "\f067";
+}
+.fa-minus:before {
+  content: "\f068";
+}
+.fa-asterisk:before {
+  content: "\f069";
+}
+.fa-exclamation-circle:before {
+  content: "\f06a";
+}
+.fa-gift:before {
+  content: "\f06b";
+}
+.fa-leaf:before {
+  content: "\f06c";
+}
+.fa-fire:before {
+  content: "\f06d";
+}
+.fa-eye:before {
+  content: "\f06e";
+}
+.fa-eye-slash:before {
+  content: "\f070";
+}
+.fa-warning:before,
+.fa-exclamation-triangle:before {
+  content: "\f071";
+}
+.fa-plane:before {
+  content: "\f072";
+}
+.fa-calendar:before {
+  content: "\f073";
+}
+.fa-random:before {
+  content: "\f074";
+}
+.fa-comment:before {
+  content: "\f075";
+}
+.fa-magnet:before {
+  content: "\f076";
+}
+.fa-chevron-up:before {
+  content: "\f077";
+}
+.fa-chevron-down:before {
+  content: "\f078";
+}
+.fa-retweet:before {
+  content: "\f079";
+}
+.fa-shopping-cart:before {
+  content: "\f07a";
+}
+.fa-folder:before {
+  content: "\f07b";
+}
+.fa-folder-open:before {
+  content: "\f07c";
+}
+.fa-arrows-v:before {
+  content: "\f07d";
+}
+.fa-arrows-h:before {
+  content: "\f07e";
+}
+.fa-bar-chart-o:before {
+  content: "\f080";
+}
+.fa-twitter-square:before {
+  content: "\f081";
+}
+.fa-facebook-square:before {
+  content: "\f082";
+}
+.fa-camera-retro:before {
+  content: "\f083";
+}
+.fa-key:before {
+  content: "\f084";
+}
+.fa-gears:before,
+.fa-cogs:before {
+  content: "\f085";
+}
+.fa-comments:before {
+  content: "\f086";
+}
+.fa-thumbs-o-up:before {
+  content: "\f087";
+}
+.fa-thumbs-o-down:before {
+  content: "\f088";
+}
+.fa-star-half:before {
+  content: "\f089";
+}
+.fa-heart-o:before {
+  content: "\f08a";
+}
+.fa-sign-out:before {
+  content: "\f08b";
+}
+.fa-linkedin-square:before {
+  content: "\f08c";
+}
+.fa-thumb-tack:before {
+  content: "\f08d";
+}
+.fa-external-link:before {
+  content: "\f08e";
+}
+.fa-sign-in:before {
+  content: "\f090";
+}
+.fa-trophy:before {
+  content: "\f091";
+}
+.fa-github-square:before {
+  content: "\f092";
+}
+.fa-upload:before {
+  content: "\f093";
+}
+.fa-lemon-o:before {
+  content: "\f094";
+}
+.fa-phone:before {
+  content: "\f095";
+}
+.fa-square-o:before {
+  content: "\f096";
+}
+.fa-bookmark-o:before {
+  content: "\f097";
+}
+.fa-phone-square:before {
+  content: "\f098";
+}
+.fa-twitter:before {
+  content: "\f099";
+}
+.fa-facebook:before {
+  content: "\f09a";
+}
+.fa-github:before {
+  content: "\f09b";
+}
+.fa-unlock:before {
+  content: "\f09c";
+}
+.fa-credit-card:before {
+  content: "\f09d";
+}
+.fa-rss:before {
+  content: "\f09e";
+}
+.fa-hdd-o:before {
+  content: "\f0a0";
+}
+.fa-bullhorn:before {
+  content: "\f0a1";
+}
+.fa-bell:before {
+  content: "\f0f3";
+}
+.fa-certificate:before {
+  content: "\f0a3";
+}
+.fa-hand-o-right:before {
+  content: "\f0a4";
+}
+.fa-hand-o-left:before {
+  content: "\f0a5";
+}
+.fa-hand-o-up:before {
+  content: "\f0a6";
+}
+.fa-hand-o-down:before {
+  content: "\f0a7";
+}
+.fa-arrow-circle-left:before {
+  content: "\f0a8";
+}
+.fa-arrow-circle-right:before {
+  content: "\f0a9";
+}
+.fa-arrow-circle-up:before {
+  content: "\f0aa";
+}
+.fa-arrow-circle-down:before {
+  content: "\f0ab";
+}
+.fa-globe:before {
+  content: "\f0ac";
+}
+.fa-wrench:before {
+  content: "\f0ad";
+}
+.fa-tasks:before {
+  content: "\f0ae";
+}
+.fa-filter:before {
+  content: "\f0b0";
+}
+.fa-briefcase:before {
+  content: "\f0b1";
+}
+.fa-arrows-alt:before {
+  content: "\f0b2";
+}
+.fa-group:before,
+.fa-users:before {
+  content: "\f0c0";
+}
+.fa-chain:before,
+.fa-link:before {
+  content: "\f0c1";
+}
+.fa-cloud:before {
+  content: "\f0c2";
+}
+.fa-flask:before {
+  content: "\f0c3";
+}
+.fa-cut:before,
+.fa-scissors:before {
+  content: "\f0c4";
+}
+.fa-copy:before,
+.fa-files-o:before {
+  content: "\f0c5";
+}
+.fa-paperclip:before {
+  content: "\f0c6";
+}
+.fa-save:before,
+.fa-floppy-o:before {
+  content: "\f0c7";
+}
+.fa-square:before {
+  content: "\f0c8";
+}
+.fa-bars:before {
+  content: "\f0c9";
+}
+.fa-list-ul:before {
+  content: "\f0ca";
+}
+.fa-list-ol:before {
+  content: "\f0cb";
+}
+.fa-strikethrough:before {
+  content: "\f0cc";
+}
+.fa-underline:before {
+  content: "\f0cd";
+}
+.fa-table:before {
+  content: "\f0ce";
+}
+.fa-magic:before {
+  content: "\f0d0";
+}
+.fa-truck:before {
+  content: "\f0d1";
+}
+.fa-pinterest:before {
+  content: "\f0d2";
+}
+.fa-pinterest-square:before {
+  content: "\f0d3";
+}
+.fa-google-plus-square:before {
+  content: "\f0d4";
+}
+.fa-google-plus:before {
+  content: "\f0d5";
+}
+.fa-money:before {
+  content: "\f0d6";
+}
+.fa-caret-down:before {
+  content: "\f0d7";
+}
+.fa-caret-up:before {
+  content: "\f0d8";
+}
+.fa-caret-left:before {
+  content: "\f0d9";
+}
+.fa-caret-right:before {
+  content: "\f0da";
+}
+.fa-columns:before {
+  content: "\f0db";
+}
+.fa-unsorted:before,
+.fa-sort:before {
+  content: "\f0dc";
+}
+.fa-sort-down:before,
+.fa-sort-asc:before {
+  content: "\f0dd";
+}
+.fa-sort-up:before,
+.fa-sort-desc:before {
+  content: "\f0de";
+}
+.fa-envelope:before {
+  content: "\f0e0";
+}
+.fa-linkedin:before {
+  content: "\f0e1";
+}
+.fa-rotate-left:before,
+.fa-undo:before {
+  content: "\f0e2";
+}
+.fa-legal:before,
+.fa-gavel:before {
+  content: "\f0e3";
+}
+.fa-dashboard:before,
+.fa-tachometer:before {
+  content: "\f0e4";
+}
+.fa-comment-o:before {
+  content: "\f0e5";
+}
+.fa-comments-o:before {
+  content: "\f0e6";
+}
+.fa-flash:before,
+.fa-bolt:before {
+  content: "\f0e7";
+}
+.fa-sitemap:before {
+  content: "\f0e8";
+}
+.fa-umbrella:before {
+  content: "\f0e9";
+}
+.fa-paste:before,
+.fa-clipboard:before {
+  content: "\f0ea";
+}
+.fa-lightbulb-o:before {
+  content: "\f0eb";
+}
+.fa-exchange:before {
+  content: "\f0ec";
+}
+.fa-cloud-download:before {
+  content: "\f0ed";
+}
+.fa-cloud-upload:before {
+  content: "\f0ee";
+}
+.fa-user-md:before {
+  content: "\f0f0";
+}
+.fa-stethoscope:before {
+  content: "\f0f1";
+}
+.fa-suitcase:before {
+  content: "\f0f2";
+}
+.fa-bell-o:before {
+  content: "\f0a2";
+}
+.fa-coffee:before {
+  content: "\f0f4";
+}
+.fa-cutlery:before {
+  content: "\f0f5";
+}
+.fa-file-text-o:before {
+  content: "\f0f6";
+}
+.fa-building-o:before {
+  content: "\f0f7";
+}
+.fa-hospital-o:before {
+  content: "\f0f8";
+}
+.fa-ambulance:before {
+  content: "\f0f9";
+}
+.fa-medkit:before {
+  content: "\f0fa";
+}
+.fa-fighter-jet:before {
+  content: "\f0fb";
+}
+.fa-beer:before {
+  content: "\f0fc";
+}
+.fa-h-square:before {
+  content: "\f0fd";
+}
+.fa-plus-square:before {
+  content: "\f0fe";
+}
+.fa-angle-double-left:before {
+  content: "\f100";
+}
+.fa-angle-double-right:before {
+  content: "\f101";
+}
+.fa-angle-double-up:before {
+  content: "\f102";
+}
+.fa-angle-double-down:before {
+  content: "\f103";
+}
+.fa-angle-left:before {
+  content: "\f104";
+}
+.fa-angle-right:before {
+  content: "\f105";
+}
+.fa-angle-up:before {
+  content: "\f106";
+}
+.fa-angle-down:before {
+  content: "\f107";
+}
+.fa-desktop:before {
+  content: "\f108";
+}
+.fa-laptop:before {
+  content: "\f109";
+}
+.fa-tablet:before {
+  content: "\f10a";
+}
+.fa-mobile-phone:before,
+.fa-mobile:before {
+  content: "\f10b";
+}
+.fa-circle-o:before {
+  content: "\f10c";
+}
+.fa-quote-left:before {
+  content: "\f10d";
+}
+.fa-quote-right:before {
+  content: "\f10e";
+}
+.fa-spinner:before {
+  content: "\f110";
+}
+.fa-circle:before {
+  content: "\f111";
+}
+.fa-mail-reply:before,
+.fa-reply:before {
+  content: "\f112";
+}
+.fa-github-alt:before {
+  content: "\f113";
+}
+.fa-folder-o:before {
+  content: "\f114";
+}
+.fa-folder-open-o:before {
+  content: "\f115";
+}
+.fa-smile-o:before {
+  content: "\f118";
+}
+.fa-frown-o:before {
+  content: "\f119";
+}
+.fa-meh-o:before {
+  content: "\f11a";
+}
+.fa-gamepad:before {
+  content: "\f11b";
+}
+.fa-keyboard-o:before {
+  content: "\f11c";
+}
+.fa-flag-o:before {
+  content: "\f11d";
+}
+.fa-flag-checkered:before {
+  content: "\f11e";
+}
+.fa-terminal:before {
+  content: "\f120";
+}
+.fa-code:before {
+  content: "\f121";
+}
+.fa-reply-all:before {
+  content: "\f122";
+}
+.fa-mail-reply-all:before {
+  content: "\f122";
+}
+.fa-star-half-empty:before,
+.fa-star-half-full:before,
+.fa-star-half-o:before {
+  content: "\f123";
+}
+.fa-location-arrow:before {
+  content: "\f124";
+}
+.fa-crop:before {
+  content: "\f125";
+}
+.fa-code-fork:before {
+  content: "\f126";
+}
+.fa-unlink:before,
+.fa-chain-broken:before {
+  content: "\f127";
+}
+.fa-question:before {
+  content: "\f128";
+}
+.fa-info:before {
+  content: "\f129";
+}
+.fa-exclamation:before {
+  content: "\f12a";
+}
+.fa-superscript:before {
+  content: "\f12b";
+}
+.fa-subscript:before {
+  content: "\f12c";
+}
+.fa-eraser:before {
+  content: "\f12d";
+}
+.fa-puzzle-piece:before {
+  content: "\f12e";
+}
+.fa-microphone:before {
+  content: "\f130";
+}
+.fa-microphone-slash:before {
+  content: "\f131";
+}
+.fa-shield:before {
+  content: "\f132";
+}
+.fa-calendar-o:before {
+  content: "\f133";
+}
+.fa-fire-extinguisher:before {
+  content: "\f134";
+}
+.fa-rocket:before {
+  content: "\f135";
+}
+.fa-maxcdn:before {
+  content: "\f136";
+}
+.fa-chevron-circle-left:before {
+  content: "\f137";
+}
+.fa-chevron-circle-right:before {
+  content: "\f138";
+}
+.fa-chevron-circle-up:before {
+  content: "\f139";
+}
+.fa-chevron-circle-down:before {
+  content: "\f13a";
+}
+.fa-html5:before {
+  content: "\f13b";
+}
+.fa-css3:before {
+  content: "\f13c";
+}
+.fa-anchor:before {
+  content: "\f13d";
+}
+.fa-unlock-alt:before {
+  content: "\f13e";
+}
+.fa-bullseye:before {
+  content: "\f140";
+}
+.fa-ellipsis-h:before {
+  content: "\f141";
+}
+.fa-ellipsis-v:before {
+  content: "\f142";
+}
+.fa-rss-square:before {
+  content: "\f143";
+}
+.fa-play-circle:before {
+  content: "\f144";
+}
+.fa-ticket:before {
+  content: "\f145";
+}
+.fa-minus-square:before {
+  content: "\f146";
+}
+.fa-minus-square-o:before {
+  content: "\f147";
+}
+.fa-level-up:before {
+  content: "\f148";
+}
+.fa-level-down:before {
+  content: "\f149";
+}
+.fa-check-square:before {
+  content: "\f14a";
+}
+.fa-pencil-square:before {
+  content: "\f14b";
+}
+.fa-external-link-square:before {
+  content: "\f14c";
+}
+.fa-share-square:before {
+  content: "\f14d";
+}
+.fa-compass:before {
+  content: "\f14e";
+}
+.fa-toggle-down:before,
+.fa-caret-square-o-down:before {
+  content: "\f150";
+}
+.fa-toggle-up:before,
+.fa-caret-square-o-up:before {
+  content: "\f151";
+}
+.fa-toggle-right:before,
+.fa-caret-square-o-right:before {
+  content: "\f152";
+}
+.fa-euro:before,
+.fa-eur:before {
+  content: "\f153";
+}
+.fa-gbp:before {
+  content: "\f154";
+}
+.fa-dollar:before,
+.fa-usd:before {
+  content: "\f155";
+}
+.fa-rupee:before,
+.fa-inr:before {
+  content: "\f156";
+}
+.fa-cny:before,
+.fa-rmb:before,
+.fa-yen:before,
+.fa-jpy:before {
+  content: "\f157";
+}
+.fa-ruble:before,
+.fa-rouble:before,
+.fa-rub:before {
+  content: "\f158";
+}
+.fa-won:before,
+.fa-krw:before {
+  content: "\f159";
+}
+.fa-bitcoin:before,
+.fa-btc:before {
+  content: "\f15a";
+}
+.fa-file:before {
+  content: "\f15b";
+}
+.fa-file-text:before {
+  content: "\f15c";
+}
+.fa-sort-alpha-asc:before {
+  content: "\f15d";
+}
+.fa-sort-alpha-desc:before {
+  content: "\f15e";
+}
+.fa-sort-amount-asc:before {
+  content: "\f160";
+}
+.fa-sort-amount-desc:before {
+  content: "\f161";
+}
+.fa-sort-numeric-asc:before {
+  content: "\f162";
+}
+.fa-sort-numeric-desc:before {
+  content: "\f163";
+}
+.fa-thumbs-up:before {
+  content: "\f164";
+}
+.fa-thumbs-down:before {
+  content: "\f165";
+}
+.fa-youtube-square:before {
+  content: "\f166";
+}
+.fa-youtube:before {
+  content: "\f167";
+}
+.fa-xing:before {
+  content: "\f168";
+}
+.fa-xing-square:before {
+  content: "\f169";
+}
+.fa-youtube-play:before {
+  content: "\f16a";
+}
+.fa-dropbox:before {
+  content: "\f16b";
+}
+.fa-stack-overflow:before {
+  content: "\f16c";
+}
+.fa-instagram:before {
+  content: "\f16d";
+}
+.fa-flickr:before {
+  content: "\f16e";
+}
+.fa-adn:before {
+  content: "\f170";
+}
+.fa-bitbucket:before {
+  content: "\f171";
+}
+.fa-bitbucket-square:before {
+  content: "\f172";
+}
+.fa-tumblr:before {
+  content: "\f173";
+}
+.fa-tumblr-square:before {
+  content: "\f174";
+}
+.fa-long-arrow-down:before {
+  content: "\f175";
+}
+.fa-long-arrow-up:before {
+  content: "\f176";
+}
+.fa-long-arrow-left:before {
+  content: "\f177";
+}
+.fa-long-arrow-right:before {
+  content: "\f178";
+}
+.fa-apple:before {
+  content: "\f179";
+}
+.fa-windows:before {
+  content: "\f17a";
+}
+.fa-android:before {
+  content: "\f17b";
+}
+.fa-linux:before {
+  content: "\f17c";
+}
+.fa-dribbble:before {
+  content: "\f17d";
+}
+.fa-skype:before {
+  content: "\f17e";
+}
+.fa-foursquare:before {
+  content: "\f180";
+}
+.fa-trello:before {
+  content: "\f181";
+}
+.fa-female:before {
+  content: "\f182";
+}
+.fa-male:before {
+  content: "\f183";
+}
+.fa-gittip:before {
+  content: "\f184";
+}
+.fa-sun-o:before {
+  content: "\f185";
+}
+.fa-moon-o:before {
+  content: "\f186";
+}
+.fa-archive:before {
+  content: "\f187";
+}
+.fa-bug:before {
+  content: "\f188";
+}
+.fa-vk:before {
+  content: "\f189";
+}
+.fa-weibo:before {
+  content: "\f18a";
+}
+.fa-renren:before {
+  content: "\f18b";
+}
+.fa-pagelines:before {
+  content: "\f18c";
+}
+.fa-stack-exchange:before {
+  content: "\f18d";
+}
+.fa-arrow-circle-o-right:before {
+  content: "\f18e";
+}
+.fa-arrow-circle-o-left:before {
+  content: "\f190";
+}
+.fa-toggle-left:before,
+.fa-caret-square-o-left:before {
+  content: "\f191";
+}
+.fa-dot-circle-o:before {
+  content: "\f192";
+}
+.fa-wheelchair:before {
+  content: "\f193";
+}
+.fa-vimeo-square:before {
+  content: "\f194";
+}
+.fa-turkish-lira:before,
+.fa-try:before {
+  content: "\f195";
+}
+.fa-plus-square-o:before {
+  content: "\f196";
+}
diff --git a/webroot/rsrc/css/font/font-glyphicons-halflings.css b/webroot/rsrc/css/font/font-glyphicons-halflings.css
index 62e1bc6bcf..174428fd77 100644
--- a/webroot/rsrc/css/font/font-glyphicons-halflings.css
+++ b/webroot/rsrc/css/font/font-glyphicons-halflings.css
@@ -8,659 +8,608 @@
   font-weight: normal;
   font-style: normal;
 }
-.phui-icon-view.halflings {
-  display: inline-block;
-  position: relative;
-  padding-left: 20px;
-  color: {$darkgreytext};
-  text-decoration: none;
-  *display: inline;
-  *zoom: 1;
-  vertical-align: middle;
-}
-.phui-icon-view.halflings:before {
-  position: absolute;
-  left: 0;
-  top: 0;
-  display: inline-block;
-  margin: 0 5px 0 0;
+
+.phui-font-gh:before {
   font: 12px/1em 'Glyphicons Halflings Regular';
-  font-style: normal;
-  font-weight: normal;
-  color: {$darkgreytext};
-  *display: inline;
-  *zoom: 1;
-  vertical-align: middle;
-  text-transform: none;
-  -webkit-font-smoothing: antialiased;
 }
-.halflings.bluegrey:before {
-  color: #7787a6;
-}
-.halflings.white:before {
-  color: #fff;
-}
-.halflings.red:before  {
-  color: {$red};
-}
-.halflings.orange:before {
-  color: {$orange};
-}
-.halflings.yellow:before {
-  color: {$yellow};
-}
-.halflings.green:before {
-  color: {$green}
-}
-.halflings.blue:before {
-  color: {$blue};
-}
-.halflings.sky:before {
-  color: {$sky};
-}
-.halflings.indigo:before {
-  color: {$indigo};
-}
-.halflings.violet:before {
-  color: {$violet};
-}
-.halflings.glass:before {
+
+.gh-glass:before {
   content: "\E001";
 }
-.halflings.music:before {
+.gh-music:before {
   content: "\E002";
 }
-.halflings.search:before {
+.gh-search:before {
   content: "\E003";
 }
-.halflings.envelope:before {
+.gh-envelope:before {
   content: "\2709";
 }
-.halflings.heart:before {
+.gh-heart:before {
   content: "\E005";
 }
-.halflings.star:before {
+.gh-star:before {
   content: "\E006";
 }
-.halflings.star-empty:before {
+.gh-star-empty:before {
   content: "\E007";
 }
-.halflings.user:before {
+.gh-user:before {
   content: "\E008";
 }
-.halflings.film:before {
+.gh-film:before {
   content: "\E009";
 }
-.halflings.th-large:before {
+.gh-th-large:before {
   content: "\E010";
 }
-.halflings.th:before {
+.gh-th:before {
   content: "\E011";
 }
-.halflings.th-list:before {
+.gh-th-list:before {
   content: "\E012";
 }
-.halflings.ok:before {
+.gh-ok:before {
   content: "\E013";
 }
-.halflings.remove:before {
+.gh-remove:before {
   content: "\E014";
 }
-.halflings.zoom-in:before {
+.gh-zoom-in:before {
   content: "\E015";
 }
-.halflings.zoom-out:before {
+.gh-zoom-out:before {
   content: "\E016";
 }
-.halflings.off:before {
+.gh-off:before {
   content: "\E017";
 }
-.halflings.signal:before {
+.gh-signal:before {
   content: "\E018";
 }
-.halflings.cog:before {
+.gh-cog:before {
   content: "\E019";
 }
-.halflings.trash:before {
+.gh-trash:before {
   content: "\E020";
 }
-.halflings.home:before {
+.gh-home:before {
   content: "\E021";
 }
-.halflings.file:before {
+.gh-file:before {
   content: "\E022";
 }
-.halflings.time:before {
+.gh-time:before {
   content: "\E023";
 }
-.halflings.road:before {
+.gh-road:before {
   content: "\E024";
 }
-.halflings.download-alt:before {
+.gh-download-alt:before {
   content: "\E025";
 }
-.halflings.download:before {
+.gh-download:before {
   content: "\E026";
 }
-.halflings.upload:before {
+.gh-upload:before {
   content: "\E027";
 }
-.halflings.inbox:before {
+.gh-inbox:before {
   content: "\E028";
 }
-.halflings.play-circle:before {
+.gh-play-circle:before {
   content: "\E029";
 }
-.halflings.repeat:before {
+.gh-repeat:before {
   content: "\E030";
 }
-.halflings.refresh:before {
+.gh-refresh:before {
   content: "\E031";
 }
-.halflings.list-alt:before {
+.gh-list-alt:before {
   content: "\E032";
 }
-.halflings.lock:before {
+.gh-lock:before {
   content: "\1F512";
 }
-.halflings.flag:before {
+.gh-flag:before {
   content: "\E034";
 }
-.halflings.headphones:before {
+.gh-headphones:before {
   content: "\E035";
 }
-.halflings.volume-off:before {
+.gh-volume-off:before {
   content: "\E036";
 }
-.halflings.volume-down:before {
+.gh-volume-down:before {
   content: "\E037";
 }
-.halflings.volume-up:before {
+.gh-volume-up:before {
   content: "\E038";
 }
-.halflings.qrcode:before {
+.gh-qrcode:before {
   content: "\E039";
 }
-.halflings.barcode:before {
+.gh-barcode:before {
   content: "\E040";
 }
-.halflings.tag:before {
+.gh-tag:before {
   content: "\E041";
 }
-.halflings.tags:before {
+.gh-tags:before {
   content: "\E042";
 }
-.halflings.book:before {
+.gh-book:before {
   content: "\E043";
 }
-.halflings.bookmark:before {
+.gh-bookmark:before {
   content: "\1F516";
 }
-.halflings.print:before {
+.gh-print:before {
   content: "\E045";
 }
-.halflings.camera:before {
+.gh-camera:before {
   content: "\1F4F7";
 }
-.halflings.font:before {
+.gh-font:before {
   content: "\E047";
 }
-.halflings.bold:before {
+.gh-bold:before {
   content: "\E048";
 }
-.halflings.italic:before {
+.gh-italic:before {
   content: "\E049";
 }
-.halflings.text-height:before {
+.gh-text-height:before {
   content: "\E050";
 }
-.halflings.text-width:before {
+.gh-text-width:before {
   content: "\E051";
 }
-.halflings.align-left:before {
+.gh-align-left:before {
   content: "\E052";
 }
-.halflings.align-center:before {
+.gh-align-center:before {
   content: "\E053";
 }
-.halflings.align-right:before {
+.gh-align-right:before {
   content: "\E054";
 }
-.halflings.align-justify:before {
+.gh-align-justify:before {
   content: "\E055";
 }
-.halflings.list:before {
+.gh-list:before {
   content: "\E056";
 }
-.halflings.indent-left:before {
+.gh-indent-left:before {
   content: "\E057";
 }
-.halflings.indent-right:before {
+.gh-indent-right:before {
   content: "\E058";
 }
-.halflings.facetime-video:before {
+.gh-facetime-video:before {
   content: "\E059";
 }
-.halflings.picture:before {
+.gh-picture:before {
   content: "\E060";
 }
-.halflings.pencil:before {
+.gh-pencil:before {
   content: "\270F";
 }
-.halflings.map-marker:before {
+.gh-map-marker:before {
   content: "\E062";
 }
-.halflings.adjust:before {
+.gh-adjust:before {
   content: "\E063";
 }
-.halflings.tint:before {
+.gh-tint:before {
   content: "\E064";
 }
-.halflings.edit:before {
+.gh-edit:before {
   content: "\E065";
 }
-.halflings.share:before {
+.gh-share:before {
   content: "\E066";
 }
-.halflings.check:before {
+.gh-check:before {
   content: "\E067";
 }
-.halflings.move:before {
+.gh-move:before {
   content: "\E068";
 }
-.halflings.step-backward:before {
+.gh-step-backward:before {
   content: "\E069";
 }
-.halflings.fast-backward:before {
+.gh-fast-backward:before {
   content: "\E070";
 }
-.halflings.backward:before {
+.gh-backward:before {
   content: "\E071";
 }
-.halflings.play:before {
+.gh-play:before {
   content: "\E072";
 }
-.halflings.pause:before {
+.gh-pause:before {
   content: "\E073";
 }
-.halflings.stop:before {
+.gh-stop:before {
   content: "\E074";
 }
-.halflings.forward:before {
+.gh-forward:before {
   content: "\E075";
 }
-.halflings.fast-forward:before {
+.gh-fast-forward:before {
   content: "\E076";
 }
-.halflings.step-forward:before {
+.gh-step-forward:before {
   content: "\E077";
 }
-.halflings.eject:before {
+.gh-eject:before {
   content: "\E078";
 }
-.halflings.chevron-left:before {
+.gh-chevron-left:before {
   content: "\E079";
 }
-.halflings.chevron-right:before {
+.gh-chevron-right:before {
   content: "\E080";
 }
-.halflings.plus-sign:before {
+.gh-plus-sign:before {
   content: "\E081";
 }
-.halflings.minus-sign:before {
+.gh-minus-sign:before {
   content: "\E082";
 }
-.halflings.remove-sign:before {
+.gh-remove-sign:before {
   content: "\E083";
 }
-.halflings.ok-sign:before {
+.gh-ok-sign:before {
   content: "\E084";
 }
-.halflings.question-sign:before {
+.gh-question-sign:before {
   content: "\E085";
 }
-.halflings.info-sign:before {
+.gh-info-sign:before {
   content: "\E086";
 }
-.halflings.screenshot:before {
+.gh-screenshot:before {
   content: "\E087";
 }
-.halflings.remove-circle:before {
+.gh-remove-circle:before {
   content: "\E088";
 }
-.halflings.ok-circle:before {
+.gh-ok-circle:before {
   content: "\E089";
 }
-.halflings.ban-circle:before {
+.gh-ban-circle:before {
   content: "\E090";
 }
-.halflings.arrow-left:before {
+.gh-arrow-left:before {
   content: "\E091";
 }
-.halflings.arrow-right:before {
+.gh-arrow-right:before {
   content: "\E092";
 }
-.halflings.arrow-up:before {
+.gh-arrow-up:before {
   content: "\E093";
 }
-.halflings.arrow-down:before {
+.gh-arrow-down:before {
   content: "\E094";
 }
-.halflings.share-alt:before {
+.gh-share-alt:before {
   content: "\E095";
 }
-.halflings.resize-full:before {
+.gh-resize-full:before {
   content: "\E096";
 }
-.halflings.resize-small:before {
+.gh-resize-small:before {
   content: "\E097";
 }
-.halflings.plus:before {
+.gh-plus:before {
   content: "\002B";
 }
-.halflings.minus:before {
+.gh-minus:before {
   content: "\2212";
 }
-.halflings.asterisk:before {
+.gh-asterisk:before {
   content: "\002A";
 }
-.halflings.exclamation-sign:before {
+.gh-exclamation-sign:before {
   content: "\E101";
 }
-.halflings.gift:before {
+.gh-gift:before {
   content: "\E102";
 }
-.halflings.leaf:before {
+.gh-leaf:before {
   content: "\E103";
 }
-.halflings.fire:before {
+.gh-fire:before {
   content: "\1F525";
 }
-.halflings.eye-open:before {
+.gh-eye-open:before {
   content: "\E105";
 }
-.halflings.eye-close:before {
+.gh-eye-close:before {
   content: "\E106";
 }
-.halflings.warning-sign:before {
+.gh-warning-sign:before {
   content: "\E107";
 }
-.halflings.plane:before {
+.gh-plane:before {
   content: "\E108";
 }
-.halflings.calendar:before {
+.gh-calendar:before {
   content: "\1F4C5";
 }
-.halflings.random:before {
+.gh-random:before {
   content: "\E110";
 }
-.halflings.comments:before {
+.gh-comments:before {
   content: "\E111";
 }
-.halflings.magnet:before {
+.gh-magnet:before {
   content: "\E112";
 }
-.halflings.chevron-up:before {
+.gh-chevron-up:before {
   content: "\E113";
 }
-.halflings.chevron-down:before {
+.gh-chevron-down:before {
   content: "\E114";
 }
-.halflings.retweet:before {
+.gh-retweet:before {
   content: "\E115";
 }
-.halflings.shopping-cart:before {
+.gh-shopping-cart:before {
   content: "\E116";
 }
-.halflings.folder-close:before {
+.gh-folder-close:before {
   content: "\E117";
 }
-.halflings.folder-open:before {
+.gh-folder-open:before {
   content: "\E118";
 }
-.halflings.resize-vertical:before {
+.gh-resize-vertical:before {
   content: "\E119";
 }
-.halflings.resize-horizontal:before {
+.gh-resize-horizontal:before {
   content: "\E120";
 }
-.halflings.hdd:before {
+.gh-hdd:before {
   content: "\E121";
 }
-.halflings.bullhorn:before {
+.gh-bullhorn:before {
   content: "\E122";
 }
-.halflings.bell:before {
+.gh-bell:before {
   content: "\1F514";
 }
-.halflings.certificate:before {
+.gh-certificate:before {
   content: "\E124";
 }
-.halflings.thumbs-up:before {
+.gh-thumbs-up:before {
   content: "\E125";
 }
-.halflings.thumbs-down:before {
+.gh-thumbs-down:before {
   content: "\E126";
 }
-.halflings.hand-right:before {
+.gh-hand-right:before {
   content: "\E127";
 }
-.halflings.hand-left:before {
+.gh-hand-left:before {
   content: "\E128";
 }
-.halflings.hand-top:before {
+.gh-hand-top:before {
   content: "\E129";
 }
-.halflings.hand-down:before {
+.gh-hand-down:before {
   content: "\E130";
 }
-.halflings.circle-arrow-right:before {
+.gh-circle-arrow-right:before {
   content: "\E131";
 }
-.halflings.circle-arrow-left:before {
+.gh-circle-arrow-left:before {
   content: "\E132";
 }
-.halflings.circle-arrow-top:before {
+.gh-circle-arrow-top:before {
   content: "\E133";
 }
-.halflings.circle-arrow-down:before {
+.gh-circle-arrow-down:before {
   content: "\E134";
 }
-.halflings.globe:before {
+.gh-globe:before {
   content: "\E135";
 }
-.halflings.wrench:before {
+.gh-wrench:before {
   content: "\1F527";
 }
-.halflings.tasks:before {
+.gh-tasks:before {
   content: "\E137";
 }
-.halflings.filter:before {
+.gh-filter:before {
   content: "\E138";
 }
-.halflings.briefcase:before {
+.gh-briefcase:before {
   content: "\1F4BC";
 }
-.halflings.fullscreen:before {
+.gh-fullscreen:before {
   content: "\E140";
 }
-.halflings.dashboard:before {
+.gh-dashboard:before {
   content: "\E141";
 }
-.halflings.paperclip:before {
+.gh-paperclip:before {
   content: "\1F4CE";
 }
-.halflings.heart-empty:before {
+.gh-heart-empty:before {
   content: "\E143";
 }
-.halflings.link:before {
+.gh-link:before {
   content: "\E144";
 }
-.halflings.phone:before {
+.gh-phone:before {
   content: "\E145";
 }
-.halflings.pushpin:before {
+.gh-pushpin:before {
   content: "\1F4CC";
 }
-.halflings.euro:before {
+.gh-euro:before {
   content: "\20AC";
 }
-.halflings.usd:before {
+.gh-usd:before {
   content: "\E148";
 }
-.halflings.gbp:before {
+.gh-gbp:before {
   content: "\E149";
 }
-.halflings.sort:before {
+.gh-sort:before {
   content: "\E150";
 }
-.halflings.sort-by-alphabet:before {
+.gh-sort-by-alphabet:before {
   content: "\E151";
 }
-.halflings.sort-by-alphabet-alt:before {
+.gh-sort-by-alphabet-alt:before {
   content: "\E152";
 }
-.halflings.sort-by-order:before {
+.gh-sort-by-order:before {
   content: "\E153";
 }
-.halflings.sort-by-order-alt:before {
+.gh-sort-by-order-alt:before {
   content: "\E154";
 }
-.halflings.sort-by-attributes:before {
+.gh-sort-by-attributes:before {
   content: "\E155";
 }
-.halflings.sort-by-attributes-alt:before {
+.gh-sort-by-attributes-alt:before {
   content: "\E156";
 }
-.halflings.unchecked:before {
+.gh-unchecked:before {
   content: "\E157";
 }
-.halflings.expand:before {
+.gh-expand:before {
   content: "\E158";
 }
-.halflings.collapse:before {
+.gh-collapse:before {
   content: "\E159";
 }
-.halflings.collapse-top:before {
+.gh-collapse-top:before {
   content: "\E160";
 }
-.halflings.log_in:before {
+.gh-log_in:before {
   content: "\E161";
 }
-.halflings.flash:before {
+.gh-flash:before {
   content: "\E162";
 }
-.halflings.log_out:before {
+.gh-log_out:before {
   content: "\E163";
 }
-.halflings.new_window:before {
+.gh-new_window:before {
   content: "\E164";
 }
-.halflings.record:before {
+.gh-record:before {
   content: "\E165";
 }
-.halflings.save:before {
+.gh-save:before {
   content: "\E166";
 }
-.halflings.open:before {
+.gh-open:before {
   content: "\E167";
 }
-.halflings.saved:before {
+.gh-saved:before {
   content: "\E168";
 }
-.halflings.import:before {
+.gh-import:before {
   content: "\E169";
 }
-.halflings.export:before {
+.gh-export:before {
   content: "\E170";
 }
-.halflings.send:before {
+.gh-send:before {
   content: "\E171";
 }
-.halflings.floppy_disk:before {
+.gh-floppy_disk:before {
   content: "\E172";
 }
-.halflings.floppy_saved:before {
+.gh-floppy_saved:before {
   content: "\E173";
 }
-.halflings.floppy_remove:before {
+.gh-floppy_remove:before {
   content: "\E174";
 }
-.halflings.floppy_save:before {
+.gh-floppy_save:before {
   content: "\E175";
 }
-.halflings.floppy_open:before {
+.gh-floppy_open:before {
   content: "\E176";
 }
-.halflings.credit_card:before {
+.gh-credit_card:before {
   content: "\E177";
 }
-.halflings.transfer:before {
+.gh-transfer:before {
   content: "\E178";
 }
-.halflings.cutlery:before {
+.gh-cutlery:before {
   content: "\E179";
 }
-.halflings.header:before {
+.gh-header:before {
   content: "\E180";
 }
-.halflings.compressed:before {
+.gh-compressed:before {
   content: "\E181";
 }
-.halflings.earphone:before {
+.gh-earphone:before {
   content: "\E182";
 }
-.halflings.phone_alt:before {
+.gh-phone_alt:before {
   content: "\E183";
 }
-.halflings.tower:before {
+.gh-tower:before {
   content: "\E184";
 }
-.halflings.stats:before {
+.gh-stats:before {
   content: "\E185";
 }
-.halflings.sd_video:before {
+.gh-sd_video:before {
   content: "\E186";
 }
-.halflings.hd_video:before {
+.gh-hd_video:before {
   content: "\E187";
 }
-.halflings.subtitles:before {
+.gh-subtitles:before {
   content: "\E188";
 }
-.halflings.sound_stereo:before {
+.gh-sound_stereo:before {
   content: "\E189";
 }
-.halflings.sound_dolby:before {
+.gh-sound_dolby:before {
   content: "\E190";
 }
-.halflings.sound_5_1:before {
+.gh-sound_5_1:before {
   content: "\E191";
 }
-.halflings.sound_6_1:before {
+.gh-sound_6_1:before {
   content: "\E192";
 }
-.halflings.sound_7_1:before {
+.gh-sound_7_1:before {
   content: "\E193";
 }
-.halflings.copyright_mark:before {
+.gh-copyright_mark:before {
   content: "\E194";
 }
-.halflings.registration_mark:before {
+.gh-registration_mark:before {
   content: "\E195";
 }
-.halflings.cloud:before {
+.gh-cloud:before {
   content: "\2601";
 }
-.halflings.cloud_download:before {
+.gh-cloud_download:before {
   content: "\E197";
 }
-.halflings.cloud_upload:before {
+.gh-cloud_upload:before {
   content: "\E198";
 }
-.halflings.tree_conifer:before {
+.gh-tree_conifer:before {
   content: "\E199";
 }
-.halflings.tree_deciduous:before {
+.gh-tree_deciduous:before {
   content: "\E200";
 }
diff --git a/webroot/rsrc/css/font/phui-font-icon-base.css b/webroot/rsrc/css/font/phui-font-icon-base.css
new file mode 100644
index 0000000000..b4320c5213
--- /dev/null
+++ b/webroot/rsrc/css/font/phui-font-icon-base.css
@@ -0,0 +1,160 @@
+/**
+ * @provides phui-font-icon-base-css
+ */
+
+.phui-font-gh,
+.phui-font-fa {
+  display: inline-block;
+  position: relative;
+  color: {$darkgreytext};
+  text-decoration: none;
+  *display: inline;
+  *zoom: 1;
+  vertical-align: middle;
+}
+.phui-font-gh:before,
+.phui-font-fa:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: inline-block;
+  margin: 0 5px 0 0;
+  font-style: normal;
+  font-weight: normal;
+  color: {$darkgreytext};
+  *display: inline;
+  *zoom: 1;
+  vertical-align: middle;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ph-rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.ph-rotate-180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.ph-rotate-270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+.ph-flip-horizontal {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+.ph-flip-vertical {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+
+.ph-spin {
+  -webkit-animation: spin 2s infinite linear;
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -o-transform: rotate(0deg);
+  }
+  100% {
+    -o-transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -ms-transform: rotate(0deg);
+  }
+  100% {
+    -ms-transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+.phui-icon-view.bluegrey:before {
+  color: #7787a6;
+}
+.phui-icon-view.white:before {
+  color: #fff;
+}
+.phui-icon-view.red:before  {
+  color: {$red};
+}
+.phui-icon-view.orange:before {
+  color: {$orange};
+}
+.phui-icon-view.yellow:before {
+  color: {$yellow};
+}
+.phui-icon-view.green:before {
+  color: {$green}
+}
+.phui-icon-view.blue:before {
+  color: {$blue};
+}
+.phui-icon-view.sky:before {
+  color: {$sky};
+}
+.phui-icon-view.indigo:before {
+  color: {$indigo};
+}
+.phui-icon-view.violet:before {
+  color: {$violet};
+}
+.phui-icon-view.lightbluetext:before {
+  color: {$lightbluetext};
+}
+.phui-icon-view.lightgreytext:before {
+  color: {$lightgreytext};
+}
diff --git a/webroot/rsrc/css/phui/phui-icon.css b/webroot/rsrc/css/phui/phui-icon.css
index d46e3e979f..7a6673bf3e 100644
--- a/webroot/rsrc/css/phui/phui-icon.css
+++ b/webroot/rsrc/css/phui/phui-icon.css
@@ -52,3 +52,7 @@
   width: 35px;
   background-size: 35px;
 }
+
+.phui-icon-has-text {
+  padding-left: 20px;
+}
diff --git a/webroot/rsrc/externals/font/fontawesome/fontawesome-webfont.eot b/webroot/rsrc/externals/font/fontawesome/fontawesome-webfont.eot
new file mode 100644
index 0000000000..7c79c6a6bc
Binary files /dev/null and b/webroot/rsrc/externals/font/fontawesome/fontawesome-webfont.eot differ
diff --git a/webroot/rsrc/externals/font/fontawesome/fontawesome-webfont.ttf b/webroot/rsrc/externals/font/fontawesome/fontawesome-webfont.ttf
new file mode 100644
index 0000000000..e89738de5e
Binary files /dev/null and b/webroot/rsrc/externals/font/fontawesome/fontawesome-webfont.ttf differ
diff --git a/webroot/rsrc/externals/font/fontawesome/fontawesome-webfont.woff b/webroot/rsrc/externals/font/fontawesome/fontawesome-webfont.woff
new file mode 100644
index 0000000000..8c1748aab7
Binary files /dev/null and b/webroot/rsrc/externals/font/fontawesome/fontawesome-webfont.woff differ