replaced category emojis with fontawesome icons

public/js/app.js

@@ -21,13 +21,13 @@ var currentUser = sessionStorage.getItem('webgis_user') || '';
 
 // Category Definitions with Labels, Icons, and Colors
 var CATEGORIES = {
-    mobility:    { label: 'Mobilität',   icon: '🚲', color: '#1565C0', faIcon: 'fa-bicycle' },
+    consumption: { label: 'Geschäfte',   faIcon: 'fa-cart-shopping', color: '#C00000' },
-    building:    { label: 'Bauen',       icon: '🏗️', color: '#E65100', faIcon: 'fa-helmet-safety' },
+    building:    { label: 'Bauen',       faIcon: 'fa-building',      color: '#E65100' },
-    energy:      { label: 'Energie',     icon: '⚡', color: '#F9A825', faIcon: 'fa-bolt' },
+    energy:      { label: 'Energie',     faIcon: 'fa-bolt',          color: '#FFC000' },
-    environment: { label: 'Umwelt',      icon: '🌳', color: '#2E7D32', faIcon: 'fa-tree' },
+    environment: { label: 'Umwelt',      faIcon: 'fa-seedling',      color: '#92D050' },
-    industry:    { label: 'Industrie',   icon: '🏭', color: '#6A1B9A', faIcon: 'fa-industry' },
+    mobility:    { label: 'Mobilität',   faIcon: 'fa-bus',           color: '#0070C0' },
-    consumption: { label: 'Konsum',      icon: '🛒', color: '#AD1457', faIcon: 'fa-cart-shopping' },
+    industry:    { label: 'Industrie',   faIcon: 'fa-industry',      color: '#7030A0' },
-    other:       { label: 'Sonstiges',   icon: '📌', color: '#546E7A', faIcon: 'fa-map-pin' }
+    other:       { label: 'Sonstiges',   faIcon: 'fa-thumbtack',     color: '#7F7F7F' }
 };
 
 // Application State
@@ -381,7 +381,7 @@ function bindFeaturePopup(feature, layer) {
     // Builds Popup on Click
     var html = '' +
         '<div class="popup-detail">' +
-            '<span class="popup-detail-category">' + cat.icon + ' ' + cat.label + '</span>' +
+            '<span class="popup-detail-category">' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
             '<div class="popup-detail-title">' + escapeHtml(props.title) + '</div>' +
             (props.description ? '<div class="popup-detail-description">' + escapeHtml(props.description) + '</div>' : '') +
             '<div class="popup-detail-meta">' +
@@ -406,7 +406,7 @@ function bindFeaturePopup(feature, layer) {
     layer.bindPopup(html, { maxWidth: 320, minWidth: 240 });
 
     // Builds Tooltip on Hover
-    layer.bindTooltip(cat.icon + ' ' + escapeHtml(props.title), {
+    layer.bindTooltip(categoryIcon(cat) + ' ' + escapeHtml(props.title), {
         direction: 'top',
         offset: [0, -10]
     });
@@ -657,7 +657,7 @@ function updateContributionsList() {
         html += '' +
             '<div class="contribution-card" onclick="flyToContribution(' + props.contribution_id + ')">' +
                 '<div class="contribution-card-header">' +
-                    '<span class="contribution-card-category">' + cat.icon + ' ' + cat.label + '</span>' +
+                    '<span class="contribution-card-category">' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
                 '</div>' +
                 '<div class="contribution-card-title">' + escapeHtml(props.title) + '</div>' +
                 '<div class="contribution-card-meta">' +
@@ -720,7 +720,7 @@ function buildCategoryFilter() {
             '<label style="display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer;">' +
                 '<input type="checkbox" value="' + key + '" ' + checked + ' onchange="toggleCategoryFilter(this)">' +
                 '<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:' + cat.color + ';"></span>' +
-                '<span>' + cat.icon + ' ' + cat.label + '</span>' +
+                '<span>' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
             '</label>';
     }
 
@@ -782,7 +782,7 @@ function updateStatistics() {
         var count = counts[key] || 0;
         if (count > 0) {
             html += '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:0.85rem;">' +
-                '<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:' + cat.color + ';"></span>' +
+                categoryIcon(cat) + ' ' +
                 cat.label + ': ' + count +
             '</div>';
         }
@@ -918,6 +918,11 @@ function escapeHtml(text) {
     return div.innerHTML;
 }
 
+// Returns a colored Font Awesome Icon HTML String for a Category
+function categoryIcon(cat) {
+    return '<i class="fa-solid ' + cat.faIcon + '" style="color:' + cat.color + ';"></i>';
+}
+
 
 // =====================================================================
 // Block 16: Application Startup
@@ -930,7 +935,8 @@ function buildCategoryDropdown() {
         var cat = CATEGORIES[key];
         var option = document.createElement('option');
         option.value = key;
-        option.textContent = cat.icon + ' ' + cat.label;
+        option.textContent = cat.label;
+        option.dataset.icon = cat.faIcon;
         select.appendChild(option);
     }
 }