refactor icons

* replace fa icon references with semantic sg descriptors
* only include necessary parts of font-awesome
* add missing size modifiers

core/templates/core/_claim.html

 {% random STADTGESTALTEN_CLAIMS as claim %}
 {% if claim %}
     <div class="breadcrumb claim">
-        <i class="fa fa-bullhorn"></i>
+        <i class="sg sg-claim"></i>
         <span>{{ claim }}</span>
     </div>
 {% endif %}

features/content/templates/content/form.html

@@ -24,7 +24,7 @@
                         Besondere Formatierungen lassen sich mit den Knöpfen oben erzeugen.
                     {% endif %}
                     Erläuterungen gibt es in der
-                    <a href="/stadt/markdown/"><i class="fa fa-question-circle">&nbsp;</i>Hilfe zur Textauszeichnung</a>.
+                    <a href="/stadt/markdown/"><i class="sg sg-info">&nbsp;</i>Hilfe zur Textauszeichnung</a>.
                 </p>
             </div>
             {% block form_extra %}{% endblock %}

features/gestalten/auth/templates/auth/login.html

@@ -21,7 +21,7 @@
             <div class="account-actions">
                 <a href="{% provider_login_url 'facebook' %}"
                    class="btn btn-link">
-                    <span class="fa fa-facebook"></span>
+                    <span class="sg sg-facebook"></span>
                     Mit Facebook anmelden
                 </a>
             </div>

features/gestalten/templates/gestalten/detail.html

@@ -18,7 +18,7 @@
             {% if can_edit %}
                 <div class="btn-toolbar btn-toolbar-bottom btn-toolbar-fixed">
                     <a href="{% url 'image-settings' %}" class="btn btn-backdrop btn-ts" title="Hintergrundbild ändern">
-                        <i class="fa fa-2x fa-camera"></i>
+                        <i class="sg sg-2x sg-camera"></i>
                     </a>
                 </div>
             {% endif %}
@@ -78,7 +78,7 @@
                             <button type="button" class="btn-text hide-no-js" data-component="clipboard"
                                     data-clipboard-text="{{ site.domain }}/gestalt/{{ gestalt.user.username }}"
                                     title="URL zu dieser Gestalt kopieren">
-                                <i class="fa fa-clipboard"></i>
+                                <i class="sg sg-copy"></i>
                             </button>
                         </dd>
                     </dl>

features/groups/templates/groups/detail/_intro_gallery.html

@@ -13,7 +13,7 @@
         </div>
     {% else %}
         <div class="disclaimer">
-            <i class="fa fa-5x fa-image"></i><br />
+            <i class="sg sg-5x sg-image"></i><br />
             <p>Diese Gruppe war bisher nicht motiviert eine Introgalerie anzulegen.</p>
             {% load rules %}
             {% has_perm 'memberships.join_group' user group as can_join %}
@@ -31,11 +31,11 @@
     <div class="btn-toolbar btn-toolbar-bottom btn-toolbar-fixed">
         {% if intro_gallery %}
             <a class="btn btn-backdrop btn-ts" href="{{ intro_gallery.get_absolute_url }}" title="Introgalerie anzeigen">
-                <i class="fa fa-2x fa-camera"></i>
+                <i class="sg sg-2x sg-camera"></i>
             </a>
         {% else %}
         <a class="btn btn-backdrop btn-ts" href="{% url 'create-group-gallery' group.slug %}?pinned=1&amp;public=1&amp;text=Introgalerie%20der%20Gruppe%20%40{{ group.slug|urlencode }}&amp;title={{ group|urlencode }}" title="Introgalerie anlegen">
-                <i class="fa fa-2x fa-camera"></i>
+                <i class="sg sg-2x sg-camera"></i>
             </a>
         {% endif %}
     </div>

features/stadt/templates/stadt/index.html

@@ -20,7 +20,7 @@
                     <label class="action" for="sg-help-group">
                         <span class="action-inner">
                             <span class="action-icon">
-                                <i class="fa fa-users"></i>
+                                <i class="sg sg-intro-group"></i>
                             </span>
                             <span class="action-description">
                                 Deine Gruppe jetzt!
@@ -32,7 +32,7 @@
                     <label class="action" for="sg-help-local">
                         <span class="action-inner">
                             <span class="action-icon">
-                                <i class="fa fa-anchor"></i>
+                                <i class="sg sg-intro-local"></i>
                             </span>
                             <span class="action-description">
                                 Für {{ town_name }}
@@ -44,7 +44,7 @@
                     <label class="action" for="sg-help-privacy">
                         <span class="action-inner">
                             <span class="action-icon">
-                                <i class="fa fa-heart"></i>
+                                <i class="sg sg-intro-privacy"></i>
                             </span>
                             <span class="action-description">
                                 Ohne Schabernack
@@ -56,7 +56,7 @@
                     <label class="action" for="sg-help-participate">
                         <span class="action-inner">
                             <span class="action-icon">
-                                <i class="fa fa-road"></i>
+                                <i class="sg sg-intro-participate"></i>
                             </span>
                             <span class="action-description">
                                 Du bestimmst!

features/stadt/templates/stadt/search.html

@@ -30,7 +30,7 @@
         {% else %}
             <div class="alert alert-flex alert-default">
                 <div class="alert-image">
-                    <i class="fa fa-3x fa-meh-o"></i>
+                    <i class="sg sg-3x sg-no-results"></i>
                 </div>
                 <div>
                     <p>Leider haben wir keine passenden Beiträge für deine Suchanfrage gefunden.</p>

res/css/components/avatar.less

@@ -186,8 +186,8 @@
     z-index: 10;
 
     &:after {
+        .sg();
         content: @fa-var-pencil;
-        .fa-icon();
         position: absolute;
         left: 50%;
         top: 50%;

res/css/components/button.less

@@ -108,8 +108,8 @@
             border-color: @color-primary;
 
             &::after {
+                .sg();
                 @size: 1.75em;
-                .fa-icon();
                 content: @fa-var-check;
                 position: absolute;
                 right: (@size / -2);
@@ -353,7 +353,7 @@
 }
 
 .btn-more {
-    &:extend(.sg);
+    .sg();
 
     &::after {
         content: @fa-var-ellipsis-h;
@@ -365,7 +365,7 @@
     padding-right: 3.25em;
 
     &:after {
-        .fa-icon();
+        .sg();
         content: @fa-var-check;
         width: 2.5em;
         text-align: center;

res/css/components/carousel.less

@@ -127,7 +127,7 @@
 }
 
 .carousel-btn-icon {
-    .fa();
+    .sg();
     font-size: 1.3rem;
     line-height: 1;
 

res/css/components/decorations.less

@@ -21,7 +21,7 @@
 
     &:after,
     &:before {
-        &:extend(.sg);
+        .sg();
         position: absolute;
         right: 0;
         margin-right: .75em;

res/css/components/dropdown.less

@@ -109,7 +109,7 @@
 }
 
 .caret {
-    .fa-icon();
+    .sg();
 
     &:before {
         content: @fa-var-caret-down;

res/css/components/editor.less

@@ -68,6 +68,18 @@
     .editor-container:not(.editor-container-active) & {
         transform: none !important;
     }
+
+    .sg-editor-hx::after {
+        font-family: @font-family-default;
+        font-size: .65em;
+        vertical-align: text-bottom;
+        position: relative;
+        top: 2px;
+    }
+
+    .sg-editor-h2::after {
+        content: '2';
+    }
 }
 
 .editor-images {

res/css/components/form.less

@@ -183,7 +183,7 @@ label {
 
             &:before,
             &:after {
-                .fa-icon();
+                .sg();
                 position: absolute;
                 right: 1.5rem;
                 top: 50%;

res/css/components/icons.less

-.sg {
-    .fa();
+.sg-xl {
+    font-size: 1.5rem;
 }
 
-.sg-2x {
-    .fa-2x();
+.sg-2x,
+.sg-xxl {
+    font-size: 2rem;
 }
 
-.sg-fw {
-    .fa-fw();
+.sg-3x {
+    font-size: 3rem;
+}
+
+.sg-4x {
+    font-size: 4rem;
+}
+
+.sg-5x {
+    font-size: 5rem;
 }
 
 .sg-active {
-    color: @color-primary;
+    color: @color-primary !important;
 }
 
-.sg-icon(@selector, @font-awesome-name) {
-    .sg-@{selector}::after {
-        content: @font-awesome-name;
+.sg-icon(@selector, @font-awesome-var, @position: after, @extensions: false) {
+    .sg-@{selector} when (@extensions) {
+        @extensions();
+    }
+
+    .sg-@{selector}:@{position} {
+        content: @font-awesome-var;
     }
 }
 
 .sg-icon(camera, @fa-var-camera);
 .sg-icon(add, @fa-var-plus);
 .sg-icon(address, @fa-var-map-marker);
-.sg-icon(info, @fa-var-info-circle);
+.sg-icon(info, @fa-var-info-circle, before);
 .sg-icon(home, @fa-var-home);
 .sg-icon(author, @fa-var-user);
 .sg-icon(group, @fa-var-users);
@@ -32,17 +45,6 @@
 .sg-icon(closed, @fa-var-user-secret);
 .sg-icon(comments, @fa-var-comments-o);
 .sg-icon(conversations, @fa-var-comments-o);
-.sg-icon(article, @fa-var-file-text-o);
-.sg-icon(content-type-article, @fa-var-file-text-o);
-.sg-icon(event, @fa-var-calendar-o);
-.sg-icon(content-type-event, @fa-var-calendar-o);
-.sg-icon(gallery, @fa-var-picture-o);
-.sg-icon(content-type-gallery, @fa-var-picture-o);
-.sg-icon(conversations, @fa-var-comments-o);
-.sg-icon(gestalt, @fa-var-user);
-.sg-icon(content-type-gestalt, @fa-var-user);
-.sg-icon(poll, @fa-var-thumbs-o-up);
-.sg-icon(content-type-poll, @fa-var-thumbs-o-up);
 .sg-icon(edit, @fa-var-pencil);
 .sg-icon(pen, @fa-var-pencil);
 .sg-icon(foundation, @fa-var-flag);
@@ -82,10 +84,66 @@
 .sg-icon(time, @fa-var-clock-o);
 .sg-icon(copy, @fa-var-clipboard);
 .sg-icon(download, @fa-var-download);
-.sg-icon(preview, @fa-var-eye);
 .sg-icon(remove, @fa-var-trash-o);
 .sg-icon(attachment, @fa-var-paperclip);
 .sg-icon(winner, @fa-var-star);
 .sg-icon(tools, @fa-var-puzzle-piece);
 .sg-icon(search, @fa-var-search);
 .sg-icon(password, @fa-var-key);
+.sg-icon(privacy-public, @fa-var-globe);
+.sg-icon(privacy-private, @fa-var-lock);
+.sg-icon(claim, @fa-var-bullhorn);
+.sg-icon(no-results, @fa-var-meh-o);
+.sg-icon(facebook, @fa-var-facebook);
+.sg-icon(image, @fa-var-image);
+
+// utility icons
+.sg-icon(increase, @fa-var-plus);
+.sg-icon(decrease, @fa-var-minus);
+.sg-icon(order-up, @fa-var-chevron-up);
+.sg-icon(order-down, @fa-var-chevron-down);
+.sg-icon(sortorder-publication, @fa-var-list-ol);
+.sg-icon(sortorder-upcoming, @fa-var-calendar-o);
+
+// editor icons
+.sg-icon(editor-bold, @fa-var-bold);
+.sg-icon(editor-italic, @fa-var-italic);
+.sg-icon(editor-undo, @fa-var-undo);
+.sg-icon(editor-redo, @fa-var-repeat);
+.sg-icon(editor-quote, @fa-var-quote-left);
+.sg-icon(editor-ul, @fa-var-list-ul);
+.sg-icon(editor-ol, @fa-var-list-ol);
+.sg-icon(editor-h1, @fa-var-header, before);
+.sg-icon(editor-h2, @fa-var-header, before);
+.sg-icon(editor-link, @fa-var-link);
+.sg-icon(editor-image, @fa-var-image);
+.sg-icon(editor-preview, @fa-var-eye, after);
+.sg.active { &:extend(.sg-active); } // editor icon states
+
+// poll icons
+.sg-icon(poll-info, @fa-var-lightbulb-o);
+.sg-icon(poll-favorite, @fa-var-heart);
+.sg-icon(poll-vote-yes, @fa-var-thumbs-up);
+.sg-icon(poll-vote-maybe, @fa-var-question);
+.sg-icon(poll-vote-no, @fa-var-thumbs-down);
+.sg-icon(poll-votetype-simple, @fa-var-thumbs-up);
+.sg-icon(poll-votetype-condorcet, @fa-var-commenting-o);
+
+// content type icons
+.sg-icon(content-type-article, @fa-var-file-text-o);
+.sg-icon(content-type-event, @fa-var-calendar-o);
+.sg-icon(content-type-gallery, @fa-var-picture-o);
+.sg-icon(content-type-gestalt, @fa-var-user);
+.sg-icon(content-type-poll, @fa-var-thumbs-o-up);
+.sg-icon(article, @fa-var-file-text-o);
+.sg-icon(event, @fa-var-calendar-o);
+.sg-icon(gallery, @fa-var-picture-o);
+.sg-icon(conversations, @fa-var-comments-o);
+.sg-icon(gestalt, @fa-var-user);
+.sg-icon(poll, @fa-var-thumbs-o-up);
+
+// intro icons
+.sg-icon(intro-group, @fa-var-users);
+.sg-icon(intro-local, @fa-var-anchor);
+.sg-icon(intro-privacy, @fa-var-heart);
+.sg-icon(intro-participate, @fa-var-road);

res/css/components/pickii.less

@@ -32,7 +32,7 @@
     }
 
     &:after {
-        .fa-icon();
+        .sg();
         content: @fa-var-check;
         background-color: fadeout(@brand-success, 40%);
         color: white;

res/css/components/poll.less

@@ -157,7 +157,7 @@
         margin-left: 1rem;
     }
 
-    .fa-heart {
+    .sg-poll-favorite {
         color: crimson;
     }
 

res/css/third-party/fontawesome.less

-// import fontawesome completely
-@import "../../../node_modules/font-awesome/less/font-awesome";
+@fa-base-path: "../../../node_modules/font-awesome/less";
+
+// includes all less variables and overwrite what’s necessary
+@import "@{fa-base-path}/variables.less";
+@fa-css-prefix: sg;
+
+// includes the font
+@import "@{fa-base-path}/path.less";
+// defines the base class
+@import "@{fa-base-path}/core.less";
+// defines the fixed-width class
+@import "@{fa-base-path}/fixed-width.less";
+// includes pulse and spin animations
+@import "@{fa-base-path}/animated.less";
+

res/js/components/content/content-order.vue

@@ -5,7 +5,7 @@
     <template v-for="action in actions">
       <button type="button" class="btn btn-icon btn-sm" :aria-pressed="action.pressed"
               :title="action.title" @click="select(action.value)">
-        <i class="fa" :class="`fa-${action.icon}`"></i>
+        <i class="sg" :class="`sg-${action.icon}`"></i>
       </button>
     </template>
   </div>
@@ -20,13 +20,13 @@
       actions () {
         return [
           {
-            icon: 'list-ol',
+            icon: 'sortorder-publication',
             value: 'all',
             pressed: this.value === 'all' ? 'true' : 'false',
             title: 'Alle Beiträge sortiert nach Veröffentlichungszeit'
           },
           {
-            icon: 'calendar-o',
+            icon: 'sortorder-upcoming',
             value: 'events',
             pressed: this.value === 'events' ? 'true' : 'false',
             title: 'Kommende Veranstaltungen sortiert nach Veranstaltungsdatum'

res/js/components/core/number-spinner.vue

@@ -3,11 +3,11 @@
     <div class="numspi-inner">
       <div class="numspi-ctl">
         <button type="button" class="numspi-btn" @click="modifyValue(-1)" :disabled="!allowDecrement">
-          <i class="fa fa-minus"></i>
+          <i class="sg sg-decrease"></i>
         </button>
         <input class="numspi-input" type="number" :min="min" :max="max" :step="step" v-model.number="currentValue" :id="id">
         <button type="button" class="numspi-btn" @click="modifyValue(1)" :disabled="!allowIncrement">
-          <i class="fa fa-plus"></i>
+          <i class="sg sg-increase"></i>
         </button>
       </div>
     </div>

res/js/components/poll/poll-editor.vue

@@ -71,14 +71,14 @@
           {
             value: 'simple',
             name: 'Meiste Stimmen',
-            icon: 'fa-thumbs-up',
+            icon: 'poll-votetype-simple',
             description: `Es wird mit Ja, Nein und Vielleicht abgestimmt. Der Vorschlag mit
             den meisten Ja-Stimmen gewinnt. Super für Termine und klare Entscheidungen.`
           },
           {
             value: 'condorcet',
             name: 'Größte Gemeinsamkeit (Condorcet)',
-            icon: 'fa-commenting-o',
+            icon: 'poll-votetype-condorcet',
             description: `Antworten werden nach Vorliebe geordnet. Vorschläge mit dem größten
           Konsens gewinnen. Gut für Richtungsentscheidungen und Stimmungsbilder.`
           }

res/js/components/poll/poll-voter-answer.vue

@@ -4,7 +4,7 @@
       <strong class="poll-answer-name">{{ option.title }}</strong>
       <figure class="poll-answer-voters" v-if="option.voters.length > 0">
         <figcaption>
-          <i class="fa fa-heart" title="Favorisiert von"></i>
+          <i class="sg sg-poll-favorite" title="Favorisiert von"></i>
         </figcaption>
         <ul class="avatars avatars-nowrap">
           <li v-for="voter in option.voters">

res/js/components/poll/poll-voter-condorcet.vue

@@ -37,12 +37,12 @@
               <button type="button" class="btn btn-default btn-sm" :disabled="index === 0"
                       title="Diese Option weiter nach oben sortieren"
                       @click="_moveOption(option.id, -1)">
-                <i class="fa fa-chevron-up"></i>
+                <i class="sg sg-order-up"></i>
               </button>
               <button type="button" class="btn btn-default btn-sm" :disabled="index + 1 === rankedOptions.length"
                       title="Diese Option weiter nach unten sortieren"
                       @click="_moveOption(option.id, +1)">
-                <i class="fa fa-chevron-down"></i>
+                <i class="sg sg-order-down"></i>
               </button>
             </div>
           </poll-voter-answer>

res/js/components/poll/poll-voter-simple.vue

@@ -72,9 +72,9 @@
       return {
         endorsements: null,
         icons: {
-          yes: 'fa fa-thumbs-up',
-          no: 'fa fa-thumbs-down',
-          maybe: 'fa fa-question'
+          yes: 'sg sg-poll-vote-yes',
+          no: 'sg sg-poll-vote-no',
+          maybe: 'sg sg-poll-vote-maybe'
         }
       }
     },

res/js/components/poll/poll-voter.vue

 <template>
   <div class="poll" :class="{ 'poll-voting': isVoting, 'poll-loading': !poll }">
     <header class="poll-header">
-      <i class="poll-header-icon fa fa-lightbulb-o" v-if="isVoting"></i>
+      <i class="poll-header-icon sg sg-poll-info" v-if="isVoting"></i>
       <slot name="header">
         <div class="poll-info">
           <div>{{ headerText }}</div>

res/js/components/time/event-time.vue

@@ -4,7 +4,7 @@
     <div class="controls">
       <sg-configurator id="event-time" @save="propagate" @show="configure">
         <span slot="label">{{ label }}</span>
-        <i slot="icon" class="fa fa-clock-o"></i>
+        <i slot="icon" class="sg sg-time"></i>
         <span slot="title">
           Wann findet die Veranstaltung statt?
         </span>

res/js/transforms/browser-warning.js

@@ -26,7 +26,7 @@ export default (el) => {
             <div class="disclaimer disclaimer-info">
                         
                 <button class="btn-text btn-text-light pull-right">
-                    <i class="fa fa-times"></i>
+                    <i class="sg sg-close"></i>
                 </button>
                 
                 <div class="container">

res/js/transforms/editor.options.js

@@ -45,84 +45,84 @@ export default (el, SimpleMDE) => ({
     {
       name: 'undo',
       action: SimpleMDE.undo,
-      className: 'fa fa-undo no-disable',
+      className: 'sg sg-editor-undo no-disable',
       title: 'Rückgängig'
     },
     {
       name: 'redo',
       action: SimpleMDE.redo,
-      className: 'fa fa-repeat no-disable',
+      className: 'sg sg-editor-redo no-disable',
       title: 'Wiederholen'
     },
     '|',
     {
       name: 'italic',
       action: SimpleMDE.toggleItalic,
-      className: 'fa fa-italic',
+      className: 'sg sg-editor-italic',
       title: 'Kursiv'
     },
     {
       name: 'bold',
       action: SimpleMDE.toggleBold,
-      className: 'fa fa-bold',
+      className: 'sg sg-editor-bold',
       title: 'Fett'
     },
     '|',
     {
       name: 'blockquote',
       action: SimpleMDE.toggleBlockquote,
-      className: 'fa fa-quote-left',
+      className: 'sg sg-editor-quote',
       title: 'Zitat'
 
     },
     {
       name: 'unordered-list',
       action: SimpleMDE.toggleUnorderedList,
-      className: 'fa fa-list-ul',
+      className: 'sg sg-editor-ul',
       title: 'Einfache Liste'
     },
     {
       name: 'ordered-list',
       action: SimpleMDE.toggleOrderedList,
-      className: 'fa fa-list-ol',
+      className: 'sg sg-editor-ol',
       title: 'Nummerierte Liste'
     },
     '|',
     {
       name: 'heading-1',
       action: SimpleMDE.toggleHeading1,
-      className: 'fa fa-header',
+      className: 'sg sg-editor-h1',
       title: 'Überschrift'
     },
     {
       name: 'heading-2',
       action: SimpleMDE.toggleHeading2,
-      className: 'fa fa-header fa-header-x fa-header-2',
+      className: 'sg sg-editor-h2 sg-editor-hx',
       title: 'Unterüberschrift'
     },
     '|',
     {
       name: 'link',
       action: SimpleMDE.drawLink,
-      className: 'fa fa-link',
+      className: 'sg sg-editor-link',
       title: 'Link/Verweis'
     },
     {
       name: 'image',
-      className: 'fa fa-picture-o',
+      className: 'sg sg-editor-image',
       title: 'Bild'
     },
     '|',
     {
       name: 'preview',
       action: SimpleMDE.togglePreview,
-      className: 'sg sg-preview no-disable',
+      className: 'sg sg-editor-preview no-disable',
       title: 'Vorschau'
     },
     {
       name: 'guide',
       action: '/stadt/markdown',
-      className: 'fa fa-question-circle',
+      className: 'sg sg-info',
       title: 'Möglichkeiten der Textauszeichnung'
     }
   ]