more plugin proof way of setting Font Awesome icons, fixes #1

README.md

@@ -59,6 +59,7 @@ Latest (master):
 * Changesets will look similar to issue's journal
 + Improved revision page layout and added Font Awesome icons
 + Improved file content view
+* Fixed #1: Font Awesome icons will no longer break plugins' icons
 
 v1.2.0 (2015-03-03):
 

src/sass/components/_admin.scss

@@ -15,7 +15,7 @@
 
         a {
             display: inline-block;
-            padding-left: 8 + 16px;
+            padding-left: 5px + 20px;
             background-position: 0 center;
         }
     }
@@ -24,7 +24,7 @@
         list-style-type: none;
 
         > a {
-            padding-left: $sidebar-padding-horizontal + 8 + 16px;
+            padding-left: $sidebar-padding-horizontal + 5px + 20px;
             background-repeat: no-repeat;
             background-position: $sidebar-padding-horizontal center;
         }

src/sass/components/_icons.scss

@@ -64,6 +64,13 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
 {
     .icon {
         @extend %fa-icon;
+        padding-left: 20px;
+        background-repeat: no-repeat;
+        background-position: 0% 50%;
+
+        &:before {
+            margin-left: -20px;
+        }
 
         .contextual & {
             margin-left: .5em;
@@ -268,48 +275,115 @@ $icon-danger-hover-color:            darken($brand-danger, 10%);
  */
 @if $use-font-awesome
 {
+    %admin-icon {
+        @extend %fa-icon;
+
+        &:before {
+            width: 20px;
+            margin-left: -(5px + 20px);
+            color: $gray;
+            text-align: center;
+        }
+
+        &:hover:before {
+            color: $gray-darker;
+        }
+
+        &.selected:before {
+            color: $gray-darkest;
+        }
+    }
+
     #admin-menu {
         #admin-index > & {
             a {
-                padding-left: 0;
+                padding-left: 5px + 20px;
             }
         }
 
         li {
             > a {
-                @extend %fa-icon;
+                padding-left: $sidebar-padding-horizontal + 5px + 20px;
-                padding-left: $sidebar-padding-horizontal;
-
-                &:before {
-                    width: 1em;
-                    margin-right: .5em;
-                    color: $gray;
-                    text-align: center;
-                }
-
-                &:hover:before {
-                    color: $gray-darker;
-                }
-
-                &.selected:before {
-                    color: $gray-darkest;
-                }
             }
         }
 
-        .projects:before              { content: $fa-var-cubes; }
+        .projects {
-        .users:before                 { content: $fa-var-user; }
+            @extend %admin-icon;
-        .groups:before                { content: $fa-var-group; }
+
-        .roles:before                 { content: $fa-var-eye; }
+            &:before { content: $fa-var-cubes; }
-        .trackers:before              { content: $fa-var-ticket; }
+        }
-        .issue_statuses:before        { content: $fa-var-pencil-square; }
+
-        .workflows:before             { content: $fa-var-sitemap; }
+        .users {
-        .custom_fields:before         { content: $fa-var-edit; }
+            @extend %admin-icon;
-        .enumerations:before          { content: $fa-var-list; }
+
-        .settings:before              { content: $fa-var-gear; }
+            &:before { content: $fa-var-user; }
-        .plugins:before               { content: $fa-var-puzzle-piece; }
+        }
-        .info:before                  { content: $fa-var-info-circle; }
+
-        .server_authentication:before { content: $fa-var-key; }
+        .groups {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-group; }
+        }
+
+        .roles {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-eye; }
+        }
+
+        .trackers {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-ticket; }
+        }
+
+        .issue_statuses {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-pencil-square; }
+        }
+
+        .workflows {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-sitemap; }
+        }
+
+        .custom_fields {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-edit; }
+        }
+
+        .enumerations {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-list; }
+        }
+
+        .settings {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-gear; }
+        }
+
+        .plugins {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-puzzle-piece; }
+        }
+
+        .info {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-info-circle; }
+        }
+
+        .server_authentication {
+            @extend %admin-icon;
+
+            &:before { content: $fa-var-key; }
+        }
     }
 }
 @else

src/sass/components/_jstoolbar.scss

@@ -25,7 +25,7 @@
 @if $use-font-awesome
 {
     .jstElements {
-        button[type="button"] {
+        %jstb-icon {
             padding: 0;
             background: $body-bg;
             background-image: none;
@@ -37,21 +37,95 @@
             }
         }
 
-        .jstb_strong:before { content: $fa-var-bold; }
+        .jstb_strong {
-        .jstb_em:before     { content: $fa-var-italic; }
+            @extend %jstb-icon;
-        .jstb_ins:before    { content: $fa-var-underline; }
+
-        .jstb_del:before    { content: $fa-var-strikethrough; }
+            &:before { content: $fa-var-bold; }
-        .jstb_code:before   { content: $fa-var-code; }
+        }
-        .jstb_h1:before     { content: $fa-var-header; }
+
-        .jstb_h2:before     { content: $fa-var-header; font-size: 11px; }
+        .jstb_em {
-        .jstb_h3:before     { content: $fa-var-header; font-size: 9px; }
+            @extend %jstb-icon;
-        .jstb_ul:before     { content: $fa-var-list-ul; }
+
-        .jstb_ol:before     { content: $fa-var-list-ol; }
+            &:before { content: $fa-var-italic; }
-        .jstb_bq:before     { content: $fa-var-indent; }
+        }
-        .jstb_unbq:before   { content: $fa-var-outdent; }
+
-        .jstb_pre:before    { content: $fa-var-terminal; }
+        .jstb_ins {
-        .jstb_link:before   { content: $fa-var-link; }
+            @extend %jstb-icon;
-        .jstb_img:before    { content: $fa-var-image; }
+
+            &:before { content: $fa-var-underline; }
+        }
+
+        .jstb_del {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-strikethrough; }
+        }
+
+        .jstb_code {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-code; }
+        }
+
+        .jstb_h1 {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-header; }
+        }
+
+        .jstb_h2 {
+            @extend %jstb-icon;
+
+            &:before { font-size: .7857em; content: $fa-var-header; }
+        }
+
+        .jstb_h3 {
+            @extend %jstb-icon;
+
+            &:before { font-size: .6429em; content: $fa-var-header; }
+        }
+
+        .jstb_ul {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-list-ul; }
+        }
+
+        .jstb_ol {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-list-ol; }
+        }
+
+        .jstb_bq {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-indent; }
+        }
+
+        .jstb_unbq {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-outdent; }
+        }
+
+        .jstb_pre {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-terminal; }
+        }
+
+        .jstb_link {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-link; }
+        }
+
+        .jstb_img {
+            @extend %jstb-icon;
+
+            &:before { content: $fa-var-image; }
+        }
 
         button.jstb_help {
             color: $link-color;
@@ -60,9 +134,7 @@
                 color: $link-hover-color;
             }
 
-            &:before {
+            &:before { content: $fa-var-question-circle; }
-                content: $fa-var-question-circle;
-            }
         }
     }
 }