semantic names for indicator icons

For all of the discussion that we had about what kind of icons should
and should not be used to indicate what mode the notebook is in, we
never went through to make it possible to override it.

With this change, it is now possible to override what icons are
displayed for Command and Edit Modes.

For example, @minrk liked the fighter-jet icon for Command Mode, so he
can put this in his custom.css

.ipython-command-mode:before {
     content: "\f0fb";
}

IPython/html/static/notebook/js/notificationarea.js

@@ -75,12 +75,12 @@ var IPython = (function (IPython) {
         // Command/Edit mode
         $([IPython.events]).on('edit_mode.Notebook',function () {
             IPython.save_widget.update_document_title();
-            $modal_ind_icon.attr('class','icon-pencil').attr('title','Edit Mode');
+            $modal_ind_icon.attr('class','ipython-edit-mode').attr('title','Edit Mode');
         });
 
         $([IPython.events]).on('command_mode.Notebook',function () {
             IPython.save_widget.update_document_title();
-            $modal_ind_icon.attr('class','').attr('title','Command Mode');
+            $modal_ind_icon.attr('class','ipython-command-mode').attr('title','Command Mode');
         });
 
         // Kernel events

IPython/html/static/notebook/less/notificationarea.less

@@ -16,3 +16,11 @@
     margin-right: -16px;
 }
 
+.ipython-edit-mode:before {
+     .icon(@pencil);
+}
+
+.ipython-command-mode:before {
+     .icon(' ');
+}
+

IPython/html/static/style/style.min.css

@@ -1506,6 +1506,8 @@ ul#help_menu li a{overflow:hidden;padding-right:2.2em}ul#help_menu li a i{margin
 #notification_area{z-index:10}
 .indicator_area{color:#777;padding:4px 3px;margin:0;width:11px;z-index:10;text-align:center}
 #kernel_indicator{margin-right:-16px}
+.ipython-edit-mode:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f040"}
+.ipython-command-mode:before{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:' '}
 .notification_widget{color:#777;padding:1px 12px;margin:2px 4px;z-index:10;border:1px solid #ccc;border-radius:4px;background:rgba(240,240,240,0.5)}.notification_widget.span{padding-right:2px}
 div#pager_splitter{height:8px}
 #pager-container{position:relative;padding:15px 0}