Update to Font Awesome 4.

static/css/quay.css

@@ -19,8 +19,7 @@
   width: 40px;
 }
 
-.repo-circle .icon-lock {
+.repo-circle .fa-lock {
-  font-size: 50%;
   position: absolute;
   bottom: -6px;
   right: 0px;
@@ -31,11 +30,11 @@
   text-align: center;
   height: 20px;
   line-height: 21px;
-  font-size: 12px;
+  font-size: 16px;
 }
 
-.repo-circle.no-background .icon-lock {
+.repo-circle.no-background .fa-lock {
-  bottom: -4px;
+  bottom: 2px;
   right: -6px;
   color: #444;
 }
@@ -660,7 +659,7 @@ p.editable:hover i {
 }
 
 .repo-listing i {
-  font-size: 1.5em;
+  font-size: 2em;
   color: #999;
   display: inline-block;
   margin-right: 6px;
@@ -751,15 +750,15 @@ p.editable:hover i {
   margin-right: 10px;
 }
 
-.repo .changes-container i.icon-plus-sign-alt {
+.repo .changes-container i.fa-plus-square {
   color: rgb(73, 209, 73);
 }
 
-.repo .changes-container i.icon-minus-sign-alt {
+.repo .changes-container i.fa-minus-square {
   color: rgb(209, 73, 73);
 }
 
-.repo .changes-container i.icon-edit-sign {
+.repo .changes-container i.fa-pencil-square {
   color: rgb(73, 100, 209);
 }
 
@@ -875,11 +874,11 @@ p.editable:hover i {
     width: 580px;
 }
 
-.repo-admin .repo-access-state .state-icon i.icon-lock {
+.repo-admin .repo-access-state .state-icon i.fa-lock {
   background: rgb(253, 191, 191);
 }
 
-.repo-admin .repo-access-state .state-icon i.icon-unlock-alt {
+.repo-admin .repo-access-state .state-icon i.fa-unlock-alt {
   background: rgb(170, 236, 170);
 }
 

static/directives/repo-circle.html

@@ -1,2 +1,2 @@
-<i class="icon-lock icon-large" style="{{ repo.is_public ? 'visibility: hidden' : 'visibility: visible' }}" title="Private Repository"></i>
+<i class="fa fa-lock fa-lg" style="{{ repo.is_public ? 'visibility: hidden' : 'visibility: visible' }}" title="Private Repository"></i>
-<i class="icon-hdd icon-large"></i>
+<i class="fa fa-hdd fa-lg"></i>

static/js/controllers.js

@@ -85,7 +85,7 @@ function HeaderCtrl($scope, $location, UserService, Restangular) {
         },
         template: function (datum) {
           template = '<div class="repo-mini-listing">';
-          template += '<i class="icon-hdd icon-large"></i>'
+          template += '<i class="fa fa-hdd fa-lg"></i>'
           template += '<span class="name">' + datum.repo.namespace +'/' + datum.repo.name + '</span>'
           if (datum.repo.description) {
             template += '<span class="description">' + getFirstTextLine(datum.repo.description) + '</span>'
@@ -485,7 +485,7 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
       },
       template: function (datum) {
         template = '<div class="user-mini-listing">';
-        template += '<i class="icon-user icon-large"></i>'
+        template += '<i class="fa fa-user fa-lg"></i>'
         template += '<span class="name">' + datum.username + '</span>'
         template += '</div>'
         return template;

static/js/graphing.js

@@ -1039,17 +1039,17 @@ ImageFileChangeTree.prototype.update_ = function(source) {
   node.select('.node-icon')
       .html(function(d) {
             if (!d.kind) {
-                var folder = d._children ? 'icon-folder-close' : 'icon-folder-open';
+                var folder = d._children ? 'fa fa-folder' : 'fa fa-folder-open';
                 return '<i class="' + folder + '"></i>';
             }
 
             var icon = {
-                'added': 'plus-sign-alt',
+                'added': 'plus-square',
-                'removed': 'minus-sign-alt',
+                'removed': 'minus-square',
-                'changed': 'edit-sign'
+                'changed': 'pencil-square'
             };
 
-            return '<i class="change-icon icon-' + icon[d.kind]  + '"></i>';
+            return '<i class="change-icon fa fa-' + icon[d.kind]  + '"></i>';
         });
   
   // Transition exiting nodes to the parent's new position.

static/lib/browser-chrome.js

@@ -1,5 +1,5 @@
 (function(browserchrome, $) {
-  var htmlTemplate = '<div class="browser-chrome-container"><div class="browser-chrome-header"><i class="icon-remove-sign"></i> <i class="icon-minus-sign"></i> <i class="icon-plus-sign"></i><div class="browser-chrome-tab"><div class="browser-chrome-tab-wrapper"><div class="browser-chrome-tab-content"><i class="icon-file-alt icon-large"></i> <span class="tab-title">Tab Title</span></div></div></div><div class="user-icon-container"><i class="icon-user icon-2x"></i></div></div><div class="browser-chrome-url-bar"><div class="left-controls"><i class="icon-arrow-left icon-large"></i> <i class="icon-arrow-right icon-large"></i> <i class="icon-rotate-right icon-large"></i> </div><div class="right-controls"> <i class="icon-reorder icon-large"></i></div><div class="browser-chrome-url"><span class="protocol-https" style="display: none"><i class="icon-lock"></i>https</span><span class="protocol-http"><i class="icon-file-alt"></i>http</span><span class="url-text">://google.com/</span></div></div></div>'
+  var htmlTemplate = '<div class="browser-chrome-container"><div class="browser-chrome-header"><i class="fa fa-times-circle"></i> <i class="fa fa-minus-circle"></i> <i class="fa fa-plus-circle"></i><div class="browser-chrome-tab"><div class="browser-chrome-tab-wrapper"><div class="browser-chrome-tab-content"><i class="fa fa-file-alt fa-lg"></i> <span class="tab-title">Tab Title</span></div></div></div><div class="user-icon-container"><i class="fa fa-user fa-2x"></i></div></div><div class="browser-chrome-url-bar"><div class="left-controls"><i class="fa fa-arrow-left fa-lg"></i> <i class="fa fa-arrow-right fa-lg"></i> <i class="fa fa-rotate-right fa-lg"></i> </div><div class="right-controls"> <i class="fa fa-reorder fa-lg"></i></div><div class="browser-chrome-url"><span class="protocol-https" style="display: none"><i class="fa fa-lock"></i>https</span><span class="protocol-http"><i class="fa fa-file-alt"></i>http</span><span class="url-text">://google.com/</span></div></div></div>'
 
   browserchrome.update = function() {
     $('[data-screenshot-url]').each(function(index, element) {

static/lib/pagedown/Markdown.Editor.js

@@ -1359,42 +1359,42 @@
             }
 
             group1 = makeGroup(1);
-            buttons.bold = makeButton("wmd-bold-button", "Bold - Ctrl+B", "icon-bold", bindCommand("doBold"), group1);
+            buttons.bold = makeButton("wmd-bold-button", "Bold - Ctrl+B", "fa fa-bold", bindCommand("doBold"), group1);
-            buttons.italic = makeButton("wmd-italic-button", "Italic - Ctrl+I", "icon-italic", bindCommand("doItalic"), group1);
+            buttons.italic = makeButton("wmd-italic-button", "Italic - Ctrl+I", "fa fa-italic", bindCommand("doItalic"), group1);
             
             group2 = makeGroup(2);
             /*
-            buttons.link = makeButton("wmd-link-button", "Link - Ctrl+L", "icon-link", bindCommand(function (chunk, postProcessing) {
+            buttons.link = makeButton("wmd-link-button", "Link - Ctrl+L", "fa fa-link", bindCommand(function (chunk, postProcessing) {
                 return this.doLinkOrImage(chunk, postProcessing, false);
             }), group2);
             */
-            buttons.quote = makeButton("wmd-quote-button", "Blockquote - Ctrl+Q", "icon-quote-left", bindCommand("doBlockquote"), group2);
+            buttons.quote = makeButton("wmd-quote-button", "Blockquote - Ctrl+Q", "fa fa-quote-left", bindCommand("doBlockquote"), group2);
-            buttons.code = makeButton("wmd-code-button", "Code Sample - Ctrl+K", "icon-code", bindCommand("doCode"), group2);
+            buttons.code = makeButton("wmd-code-button", "Code Sample - Ctrl+K", "fa fa-code", bindCommand("doCode"), group2);
             /*
-            buttons.image = makeButton("wmd-image-button", "Image - Ctrl+G", "icon-picture", bindCommand(function (chunk, postProcessing) {
+            buttons.image = makeButton("wmd-image-button", "Image - Ctrl+G", "fa fa-picture", bindCommand(function (chunk, postProcessing) {
                 return this.doLinkOrImage(chunk, postProcessing, true);
             }), group2);
             */
 
             group3 = makeGroup(3);
-            buttons.olist = makeButton("wmd-olist-button", "Numbered List - Ctrl+O", "icon-list", bindCommand(function (chunk, postProcessing) {
+            buttons.olist = makeButton("wmd-olist-button", "Numbered List - Ctrl+O", "fa fa-list", bindCommand(function (chunk, postProcessing) {
                 this.doList(chunk, postProcessing, true);
             }), group3);
-            buttons.ulist = makeButton("wmd-ulist-button", "Bulleted List - Ctrl+U", "icon-list-ul", bindCommand(function (chunk, postProcessing) {
+            buttons.ulist = makeButton("wmd-ulist-button", "Bulleted List - Ctrl+U", "fa fa-list-ul", bindCommand(function (chunk, postProcessing) {
                 this.doList(chunk, postProcessing, false);
             }), group3);
-            buttons.heading = makeButton("wmd-heading-button", "Heading - Ctrl+H", "icon-tasks", bindCommand("doHeading"), group3);
+            buttons.heading = makeButton("wmd-heading-button", "Heading - Ctrl+H", "fa fa-tasks", bindCommand("doHeading"), group3);
-            buttons.hr = makeButton("wmd-hr-button", "Horizontal Rule - Ctrl+R", "icon-minus", bindCommand("doHorizontalRule"), group3);
+            buttons.hr = makeButton("wmd-hr-button", "Horizontal Rule - Ctrl+R", "fa fa-minus", bindCommand("doHorizontalRule"), group3);
             
             group4 = makeGroup(4);
-            buttons.undo = makeButton("wmd-undo-button", "Undo - Ctrl+Z", "icon-undo", null, group4);
+            buttons.undo = makeButton("wmd-undo-button", "Undo - Ctrl+Z", "fa fa-undo", null, group4);
             buttons.undo.execute = function (manager) { if (manager) manager.undo(); };
 
             var redoTitle = /win/.test(nav.platform.toLowerCase()) ?
                 "Redo - Ctrl+Y" :
                 "Redo - Ctrl+Shift+Z"; // mac and other non-Windows platforms
 
-            buttons.redo = makeButton("wmd-redo-button", redoTitle, "icon-share-alt", null, group4);
+            buttons.redo = makeButton("wmd-redo-button", redoTitle, "fa fa-share", null, group4);
             buttons.redo.execute = function (manager) { if (manager) manager.redo(); };
 
             if (helpOptions) {
@@ -1402,7 +1402,7 @@
                 group5.className = group5.className + " pull-right";
                 var helpButton = document.createElement("button");
                 var helpButtonImage = document.createElement("i");
-                helpButtonImage.className = "icon-question-sign";
+                helpButtonImage.className = "fa fa-question-sign";
                 helpButton.appendChild(helpButtonImage);
                 helpButton.className = "btn";
                 helpButton.id = "wmd-help-button" + postfix;

static/partials/header.html

@@ -2,9 +2,9 @@
 <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
     <span class="sr-only">Toggle navigation</span>
-    <span class="icon-bar"></span>
+    <span class="fa-bar"></span>
-    <span class="icon-bar"></span>
+    <span class="fa-bar"></span>
-    <span class="icon-bar"></span>
+    <span class="fa-bar"></span>
   </button>
   <a class="navbar-brand" href="/">
     <img src="/static/img/quay-logo.png">

static/partials/image-view.html

@@ -3,14 +3,14 @@
 </div>
 
 <div class="loading" ng-show="loading">
-  <i class="icon-spinner icon-spin icon-3x"></i>
+  <i class="fa fa-spinner fa-spin fa-3x"></i>
 </div>
 
 <div class="container repo repo-image-view" ng-show="!loading && image">
   <div class="header">
-    <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="icon-chevron-left"></i></a>
+    <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="fa fa-chevron-left"></i></a>
     <h3>
-      <i class="icon-archive icon-large" style="color: #aaa; margin-right: 10px;"></i>
+      <i class="fa fa-archive fa-lg" style="color: #aaa; margin-right: 10px;"></i>
       <span style="color: #aaa;"> {{repo.namespace}}</span>
       <span style="color: #ccc">/</span>
       <span style="color: #666;">{{repo.name}}</span>
@@ -31,7 +31,7 @@
           <div class="input-group">
             <input id="full-id" type="text" class="form-control" value="{{ image.id }}" readonly>
             <span id="copyClipboard" class="input-group-addon" title="Copy to Clipboard" data-clipboard-target="full-id">
-              <i class="icon-copy"></i>
+              <i class="fa fa-copy"></i>
             </span>
           </div>
         </div>
@@ -75,7 +75,7 @@
             No matching changes
           </div>
           <div class="change" ng-repeat="change in combinedChanges | filter:search | limitTo:50">
-            <i ng-class="{'added': 'icon-plus-sign-alt', 'removed': 'icon-minus-sign-alt', 'changed': 'icon-edit-sign'}[change.kind]"></i>
+            <i ng-class="{'added': 'fa fa-plus-square', 'removed': 'fa fa-minus-square', 'changed': 'fa fa-pencil-square'}[change.kind]"></i>
             <span title="{{change.file}}">
               <span style="color: #888;">
                 <span ng-repeat="folder in getFolders(change.file)"><a href="javascript:void(0)" ng-click="setFolderFilter(getFolder(change.file), $index)">{{folder}}</a>/</span></span><span>{{getFilename(change.file)}}</span>

static/partials/landing.html

@@ -10,7 +10,7 @@
 
         <div ng-show="!user.anonymous">
           <div ng-show="loadingmyrepos">
-            <i class="icon-spinner icon-spin icon-3x"></i>
+            <i class="fa fa-spinner fa-spin fa-3x"></i>
           </div>
           <div ng-show="!loadingmyrepos && myrepos.length > 0">
             <h2>Your Top Repositories</h2>      
@@ -44,10 +44,10 @@
             <div class="form-group signin-buttons">
               <button class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit" analytics-on analytics-event="register">Sign Up for Free!</button>
               <span class="landing-social-alternate">
-                <i class="icon-circle"></i>
+                <i class="fa fa-circle"></i>
                 <span class="inner-text">OR</span>
               </span>
-              <a href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ github_state_clause }}" class="btn btn-primary btn-block"><i class="icon-github icon-large"></i> Sign In with GitHub</a>
+              <a href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ github_state_clause }}" class="btn btn-primary btn-block"><i class="fa fa-github fa-lg"></i> Sign In with GitHub</a>
               <p class="help-block">No credit card required.</p>
             </div>
           </form>
@@ -68,7 +68,7 @@
 
     <div class="row" ng-show="user.anonymous">
       <div class="col-md-4 shoutout">
-        <i class="icon-lock"></i>
+        <i class="fa fa-lock"></i>
         <b>Secure</b>
         <span class="shoutout-expand">
 	  Store your private docker containers where only you and your team
@@ -77,7 +77,7 @@
       </div>
 
       <div class="col-md-4 shoutout">
-        <i class="icon-user"></i>
+        <i class="fa fa-user"></i>
         <b>Shareable</b>
         <span class="shoutout-expand">
           Have to share a repository? No problem! Share with anyone you choose
@@ -85,7 +85,7 @@
       </div>
 
       <div class="col-md-4 shoutout">
-        <i class="icon-cloud"></i>
+        <i class="fa fa-cloud"></i>
         <b>Cloud Hosted</b>
         <span class="shoutout-expand">
           Accessible from anywhere, anytime
@@ -97,7 +97,7 @@
 
 <div class="product-tour container" ng-show="user.anonymous">
   <div class="tour-header row">
-    <div class="tour-shoutout-header"><i class="icon-chevron-sign-down"></i></div>
+    <div class="tour-shoutout-header"><i class="fa fa-chevron-circle-down"></i></div>
     <div class="tour-shoutout">Take a tour of Quay</div>
   </div>
 

static/partials/repo-admin.html

@@ -1,5 +1,5 @@
 <div class="loading" ng-show="loading">
-  <i class="icon-spinner icon-spin icon-3x"></i>
+  <i class="fa fa-spinner fa-spin fa-3x"></i>
 </div>
 
 <div class="container" ng-show="!loading && (!repo || !permissions)">
@@ -8,7 +8,7 @@
 
 <div class="container repo repo-admin" ng-show="!loading && repo && permissions">
   <div class="header">
-    <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="icon-chevron-left"></i></a>
+    <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="fa fa-chevron-left"></i></a>
     <h3>
       <span class="repo-circle no-background" repo="repo"></span> <span style="color: #aaa;"> {{repo.namespace}}</span> <span style="color: #ccc">/</span> {{repo.name}}
     </h3>
@@ -18,7 +18,7 @@
   <div class="panel panel-default">
     <div class="panel-heading">User Access Permissions
 
-      <i class="info-icon icon-info-sign" data-placement="left" data-content="Allow any number of users to read, write or administer this repository"></i>
+      <i class="info-icon fa fa-info-circle" data-placement="left" data-content="Allow any number of users to read, write or administer this repository"></i>
     </div>
     <div class="panel-body">
         
@@ -33,7 +33,7 @@
         
         <tr ng-repeat="(username, permission) in permissions">
           <td class="user">
-            <i class="icon-user"></i> 
+            <i class="fa fa-user"></i> 
             <span>{{username}}</span>
           </td>
           <td class="user-permissions">
@@ -46,7 +46,7 @@
           <td>
             <span class="delete-ui" tabindex="0" title="Delete Permission">
               <span class="delete-ui-button" ng-click="deleteRole(username)"><button class="btn btn-danger">Delete</button></span>
-              <i class="icon-remove"></i>
+              <i class="fa fa-remove"></i>
             </span>
           </td>
         </tr>
@@ -64,7 +64,7 @@
   <div class="panel panel-default">
     <div class="panel-heading">Access Token Permissions
 
-      <i class="info-icon icon-info-sign" data-placement="left" data-content="Grant permissions to this repository by creating unique tokens that can be used without entering account passwords<br><br>To use in docker:<br><dl class='dl-horizontal'><dt>Username</dt><dd>$token</dd><dt>Password</dt><dd>(token value)</dd><dt>Email</dt><dd>(any value)</dd></dl>"></i>
+      <i class="info-icon fa fa-info-circle" data-placement="left" data-content="Grant permissions to this repository by creating unique tokens that can be used without entering account passwords<br><br>To use in docker:<br><dl class='dl-horizontal'><dt>Username</dt><dd>$token</dd><dt>Password</dt><dd>(token value)</dd><dt>Email</dt><dd>(any value)</dd></dl>"></i>
     </div>
     <div class="panel-body">
       <form name="createTokenForm" ng-submit="createToken()">
@@ -79,7 +79,7 @@
           
           <tr ng-repeat="(code, token) in tokens">
             <td class="user token">
-              <i class="icon-key"></i> 
+              <i class="fa fa-key"></i> 
               <a ng-click="showToken(token.code)">{{ token.friendlyName }}</a>
             </td>
             <td class="user-permissions">
@@ -91,7 +91,7 @@
             <td>
               <span class="delete-ui" tabindex="0" title="Delete Token">
                 <span class="delete-ui-button" ng-click="deleteToken(token.code)"><button class="btn btn-danger" type="button">Delete</button></span>
-                <i class="icon-remove"></i>
+                <i class="fa fa-remove"></i>
               </span>
             </td>
           </tr>
@@ -114,7 +114,7 @@
     <div class="panel-heading">Repository Settings</div>
     <div class="panel-body">
     <div class="repo-access-state" ng-show="!repo.is_public">
-    <div class="state-icon"><i class="icon-lock"></i></div>
+    <div class="state-icon"><i class="fa fa-lock"></i></div>
 
         This repository is currently <b>private</b>. Only users on the above access list may view and interact with it.
 
@@ -124,7 +124,7 @@
       </div>
 
       <div class="repo-access-state" ng-show="repo.is_public">
-        <div class="state-icon"><i class="icon-unlock-alt"></i></div>
+        <div class="state-icon"><i class="fa fa-unlock-alt"></i></div>
 
         This repository is currently <b>public</b> and is visible to all users, and may be pulled by all users.
 
@@ -171,7 +171,7 @@
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h4 class="modal-title"><i class="icon-key"></i> {{ shownToken.friendlyName }}</h4>
+          <h4 class="modal-title"><i class="fa fa-key"></i> {{ shownToken.friendlyName }}</h4>
         </div>
         <div class="modal-body token-dialog-body">
           <div class="alert alert-info">The docker <u>username</u> is <b>$token</b> and the <u>password</u> is the token. You may use any value for email.</div>

static/partials/repo-list.html

@@ -1,5 +1,5 @@
 <div class="loading" ng-show="loading">
-  <i class="icon-spinner icon-spin icon-3x"></i>
+  <i class="fa fa-spinner fa-spin fa-3x"></i>
 </div>
 
 <div class="container ready-indicator" ng-show="!loading" data-status="{{ loading ? '' : 'ready' }}">

static/partials/signin.html

@@ -18,11 +18,11 @@
                 <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
 
                 <span class="social-alternate">
-                  <i class="icon-circle"></i>
+                  <i class="fa fa-circle"></i>
                   <span class="inner-text">OR</span>
                 </span>
 
-                <a id='github-signin-link' href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ mixpanelDistinctIdClause }}" class="btn btn-primary btn-lg btn-block"><i class="icon-github icon-large"></i> Sign In with GitHub</a>
+                <a id='github-signin-link' href="https://github.com/login/oauth/authorize?client_id={{ githubClientId }}&scope=user:email{{ mixpanelDistinctIdClause }}" class="btn btn-primary btn-lg btn-block"><i class="fa fa-github fa-lg"></i> Sign In with GitHub</a>
               </form>
 
               <div class="alert alert-danger" ng-show="invalidCredentials">Invalid username or password.</div>

static/partials/user-admin.html

@@ -1,6 +1,6 @@
 <div class="container user-admin">
   <div class="loading" ng-show="planLoading || planChanging">
-    <i class="icon-spinner icon-spin icon-3x"></i>
+    <i class="fa fa-spinner fa-spin fa-3x"></i>
   </div>
   <div class="row" ng-show="errorMessage">
     <div class="col-md-12">
@@ -18,7 +18,7 @@
         <div class="panel-heading">
           {{ plan.title }}
           <span class="pull-right" ng-show="subscription.plan == plan.stripeId">
-            <i class="icon-ok"></i>
+            <i class="fa fa-ok"></i>
             Subscribed
           </span>
         </div>
@@ -59,7 +59,7 @@
   </div>
   <div class="row">
     <div class="loading" ng-show="updatingUser">
-      <i class="icon-spinner icon-spin icon-3x"></i>
+      <i class="fa fa-spinner fa-spin fa-3x"></i>
     </div>
     <div class="col-md-3">
       <div class="panel panel-default">

static/partials/view-repo.html

@@ -3,7 +3,7 @@
 </div>
 
 <div class="loading" ng-show="loading">
-  <i class="icon-spinner icon-spin icon-3x"></i>
+  <i class="fa fa-spinner fa-spin fa-3x"></i>
 </div>
 
 <div class="container repo" ng-show="!loading && repo">
@@ -16,7 +16,7 @@
 
       <span class="settings-cog" ng-show="repo.can_admin" title="Repository Settings">
         <a href="{{ '/repository/' + repo.namespace + '/' + repo.name + '/admin' }}">
-          <i class="icon-cog icon-large"></i>
+          <i class="fa fa-cog fa-lg"></i>
         </a>
       </span>
     </h3>   
@@ -29,7 +29,7 @@
         <div class="input-group">
           <input id="pull-text" type="text" class="form-control" value="{{ 'docker pull quay.io/' + repo.namespace + '/' + repo.name }}" readonly>
           <span id="copyClipboard" class="input-group-addon" title="Copy to Clipboard" data-clipboard-target="pull-text">
-            <i class="icon-copy"></i>
+            <i class="fa fa-copy"></i>
           </span>
         </div>
       </div>
@@ -44,7 +44,7 @@
   <!-- Description -->
   <p ng-class="'description lead ' + (repo.can_write ? 'editable' : 'noteditable')" ng-click="editDescription()">
     <span class="content" ng-bind-html-unsafe="getMarkedDown(repo.description)"></span>
-    <i class="icon-edit"></i>
+    <i class="fa fa-edit"></i>
   </p>
 
   <div class="repo-content" ng-show="!currentTag.image">
@@ -62,7 +62,7 @@
             <div class="panel-heading">
               <!-- Tag dropdown -->
               <span class="tag-dropdown dropdown" title="Tags">
-                <i class="icon-tag"><span class="tag-count">{{getTagCount(repo)}}</span></i>
+                <i class="fa fa-tag"><span class="tag-count">{{getTagCount(repo)}}</span></i>
                 <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{currentTag.name}} <b class="caret"></b></a>
                 <ul class="dropdown-menu">
                   <li ng-repeat="tag in repo.tags">
@@ -76,7 +76,7 @@
 
             <!-- Image history loading -->
             <div ng-hide="imageHistory" style="padding: 10px; text-align: center;">
-              <i class="icon-spinner icon-spin icon-3x"></i>
+              <i class="fa fa-spinner fa-spin fa-3x"></i>
             </div>
 
             <!-- Tree View itself -->
@@ -90,7 +90,7 @@
            <div class="panel-heading">
              <!-- Image dropdown -->
               <span class="tag-dropdown dropdown" title="Images">
-                <i class="icon-archive"><span class="tag-count">{{imageHistory.length}}</span></i>
+                <i class="fa fa-archive"><span class="tag-count">{{imageHistory.length}}</span></i>
                 <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{currentImage.id.substr(0, 12)}} <b class="caret"></b></a>
                 <ul class="dropdown-menu">
                   <li ng-repeat="image in imageHistory">
@@ -117,22 +117,22 @@
 
                <!-- Image changes loading -->
                 <div ng-hide="currentImageChanges">
-                  <i class="icon-spinner icon-spin icon-3x"></i>
+                  <i class="fa fa-spinner fa-spin fa-3x"></i>
                 </div>
 
                 <div class="changes-container small-changes-container"
                             ng-show="currentImageChanges.changed.length || currentImageChanges.added.length || currentImageChanges.removed.length">
                   <div class="changes-count-container accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseChanges">
                     <span class="change-count added" ng-show="currentImageChanges.added.length > 0" title="Files Added">
-                      <i class="icon-plus-sign-alt"></i>
+                      <i class="fa fa-plus-square"></i>
                       <b>{{currentImageChanges.added.length}}</b>
                     </span>
                     <span class="change-count removed" ng-show="currentImageChanges.removed.length > 0" title="Files Removed">
-                      <i class="icon-minus-sign-alt"></i>
+                      <i class="fa fa-minus-square"></i>
                       <b>{{currentImageChanges.removed.length}}</b>
                     </span>
                     <span class="change-count changed" ng-show="currentImageChanges.changed.length > 0" title="Files Changed">
-                      <i class="icon-edit-sign"></i>
+                      <i class="fa fa-pencil-square"></i>
                       <b>{{currentImageChanges.changed.length}}</b>
                     </span>
                   </div>
@@ -140,15 +140,15 @@
                   <div id="collapseChanges" class="panel-collapse collapse in">
                     <div class="well well-sm">		     
                       <div class="change added" ng-repeat="file in currentImageChanges.added | limitTo:5">
-                        <i class="icon-plus-sign-alt"></i>
+                        <i class="fa fa-plus-square"></i>
                         <span title="{{file}}">{{file}}</span>
                       </div>
                       <div class="change removed" ng-repeat="file in currentImageChanges.removed | limitTo:5">
-                        <i class="icon-minus-sign-alt"></i>
+                        <i class="fa fa-minus-square"></i>
                         <span title="{{file}}">{{file}}</span>
                       </div>
                       <div class="change changed" ng-repeat="file in currentImageChanges.changed | limitTo:5">
-                        <i class="icon-edit-sign"></i>
+                        <i class="fa fa-pencil-square"></i>
                         <span title="{{file}}">{{file}}</span>
                       </div>
                     </div>

templates/base.html

@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Hosted private docker repositories. Includes full user management and history. Free for public repositories.">
 
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
     <link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>