Font Awesome 7

Haehnchen · Haehnchen · commit 7bd6a0571c32 · 2026-02-24T19:49:39.000+01:00
diff --git a/AGENTS.md b/AGENTS.md
@@ -54,7 +54,7 @@ Central service registry using dependency injection patterns:
 #### Web UI (Express.js + EJS) / Code Structure Conventions
 - **Controllers** (src/controller/): Handle HTTP requests
 - **Views** (views/): EJS templates with layout system `express-ejs-layouts`
-- Tailwind CSS 4 for styling
+- Tailwind CSS 4 for styling with "Font Awesome 7"
 - `web/` webserver root with assets
 - **Database** schema in `src/utils/database_schema.ts` with `src/repository` as Database Repository Pattern
 - **.prettierrc**: Code formatting (single quotes, 160 width)
diff --git a/views/backtest_result.ejs b/views/backtest_result.ejs
@@ -97,11 +97,11 @@
                                     <td class="border border-gray-200 px-3 py-2"><%= row.price.toFixed(2) %></td>
                                     <td class="border border-gray-200 px-3 py-2">
                                         <% if (row.signal === 'long') { %>
-                                            <i class="fas fa-chevron-circle-up text-green-600"></i>
+                                            <i class="fas fa-circle-chevron-up text-green-600"></i>
                                         <% } else if (row.signal === 'short') { %>
-                                            <i class="fas fa-chevron-circle-down text-red-600"></i>
+                                            <i class="fas fa-circle-chevron-down text-red-600"></i>
                                         <% } else if (row.signal === 'close') { %>
-                                            <i class="fa fa-times text-gray-500"></i>
+                                            <i class="fas fa-xmark text-gray-500"></i>
                                         <% } %>
                                     </td>
                                     <td class="border border-gray-200 px-3 py-2 break-all text-gray-500 text-xs">
@@ -143,11 +143,11 @@
                                 <td class="border border-gray-200 px-3 py-2"><%= row.price.toFixed(2) %></td>
                                 <td class="border border-gray-200 px-3 py-2">
                                     <% if (row.signal === 'long') { %>
-                                        <i class="fas fa-chevron-circle-up text-green-600"></i>
+                                        <i class="fas fa-circle-chevron-up text-green-600"></i>
                                     <% } else if (row.signal === 'short') { %>
-                                        <i class="fas fa-chevron-circle-down text-red-600"></i>
+                                        <i class="fas fa-circle-chevron-down text-red-600"></i>
                                     <% } else if (row.signal === 'close') { %>
-                                        <i class="fa fa-times text-gray-500"></i>
+                                        <i class="fas fa-xmark text-gray-500"></i>
                                     <% } %>
                                 </td>
                                 <% if (indicatorKeys) { indicatorKeys.forEach(function(key) { %>
diff --git a/views/ccxt_exchanges.ejs b/views/ccxt_exchanges.ejs
@@ -37,14 +37,14 @@
                                         <% if (exchange.has.fetchOHLCV) { %>
                                             <i class="fas fa-check text-green-500"></i>
                                         <% } else { %>
-                                            <i class="fas fa-times text-gray-300"></i>
+                                            <i class="fas fa-xmark text-gray-300"></i>
                                         <% } %>
                                     </td>
                                     <td class="border border-gray-200 px-3 py-2 text-center">
                                         <% if (exchange.has.createOrder) { %>
                                             <i class="fas fa-check text-green-500"></i>
                                         <% } else { %>
-                                            <i class="fas fa-times text-gray-300"></i>
+                                            <i class="fas fa-xmark text-gray-300"></i>
                                         <% } %>
                                     </td>
                                 </tr>
@@ -173,7 +173,7 @@ async function loadMarkets() {
         tbody.innerHTML = `
             <tr>
                 <td colspan="6" class="border border-gray-200 px-3 py-8 text-center ${isAuthError ? 'text-orange-500' : 'text-red-500'}">
-                    <i class="fas ${isAuthError ? 'fa-lock' : 'fa-exclamation-triangle'} text-2xl mb-2"></i>
+                    <i class="fas ${isAuthError ? 'fa-lock' : 'fa-triangle-exclamation'} text-2xl mb-2"></i>
                     <div>${isAuthError ? 'This exchange requires API authentication' : 'Error loading markets'}</div>
                     <div class="text-xs text-gray-400 mt-1">${errorMsg}</div>
                 </td>
@@ -206,7 +206,7 @@ function renderMarkets(markets) {
                 ${getTypeBadge(m)}
             </td>
             <td class="border border-gray-200 px-3 py-2 text-center">
-                ${m.contract ? (m.linear ? '<i class="fas fa-check text-green-500" title="Linear"></i>' : '<i class="fas fa-times text-red-400" title="Inverse"></i>') : '<span class="text-gray-300">-</span>'}
+                ${m.contract ? (m.linear ? '<i class="fas fa-check text-green-500" title="Linear"></i>' : '<i class="fas fa-xmark text-red-400" title="Inverse"></i>') : '<span class="text-gray-300">-</span>'}
             </td>
             <td class="border border-gray-200 px-3 py-2 whitespace-nowrap">${m.settle || '-'}</td>
         </tr>
diff --git a/views/components/backtest_table.ejs b/views/components/backtest_table.ejs
@@ -32,11 +32,11 @@
             <td class="border border-gray-200 px-3 py-2">
                 <% if (row.result && row.result._signal) { %>
                     <% if (row.result._signal === 'long') { %>
-                        <i class="fas fa-chevron-circle-up text-green-600"></i>
+                        <i class="fas fa-circle-chevron-up text-green-600"></i>
                     <% } else if (row.result._signal === 'short') { %>
-                        <i class="fas fa-chevron-circle-down text-red-600"></i>
+                        <i class="fas fa-circle-chevron-down text-red-600"></i>
                     <% } else if (row.result._signal === 'close') { %>
-                        <i class="fa fa-times"></i>
+                        <i class="fas fa-xmark"></i>
                     <% } %>
                 <% }  %>
             </td>
@@ -69,7 +69,7 @@
 
             <td class="border border-gray-200 px-3 py-2 break-all">
                 <span class="debug-toggle hide">
-                    <a href="#" class="button-debug-toggle"><i class="fa fa-eye"></i></a>
+                    <a href="#" class="button-debug-toggle"><i class="fas fa-eye"></i></a>
                     <span class="debug-text text-gray-500"><%= JSON.stringify(row) %></span>
                 </span>
             </td>
diff --git a/views/components/settings_sidebar.ejs b/views/components/settings_sidebar.ejs
@@ -5,7 +5,7 @@
         </div>
         <a href="/settings"
            class="flex items-center gap-2 px-3 py-2 border-b border-gray-100 border-l-2 <%= activeSettingsPage === '' ? 'bg-blue-50 text-blue-700 font-medium border-l-blue-600' : 'text-gray-700 hover:bg-gray-50 border-l-transparent' %>">
-            <i class="fas fa-info-circle w-4 text-center text-xs <%= activeSettingsPage === '' ? 'text-blue-500' : 'text-gray-400' %>"></i>
+            <i class="fas fa-circle-info w-4 text-center text-xs <%= activeSettingsPage === '' ? 'text-blue-500' : 'text-gray-400' %>"></i>
             System
         </a>
 
diff --git a/views/dashboard.ejs b/views/dashboard.ejs
@@ -62,7 +62,7 @@
                             const ta = row.ta[period];
                         %>
                             <td class="border border-gray-200 px-2 py-1 <%= (ta && ta.ema_55 && ta.ema_55.value && ta.ema_200 && ta.ema_200.value && ta.ema_55.value > ta.ema_200.value) ? 'text-green-600' : 'text-red-600' %>">
-                                <i class="fas <%= (ta && ta.ema_55 && ta.ema_55.value && ta.ema_200 && ta.ema_200.value && ta.ema_55.value > ta.ema_200.value) ? 'fa-arrow-alt-circle-up' : 'fa-arrow-alt-circle-down' %>"></i>
+                                <i class="fas <%= (ta && ta.ema_55 && ta.ema_55.value && ta.ema_200 && ta.ema_200.value && ta.ema_55.value > ta.ema_200.value) ? 'fa-circle-arrow-up' : 'fa-circle-arrow-down' %>"></i>
                             </td>
                             <td class="border border-gray-200 px-2 py-1">
                                 <% if (ta && ta.sma_200 && ta.sma_200.value) { %>
@@ -111,7 +111,7 @@
                                 <% } else if (ta && ta.stoch_rsi && ta.stoch_rsi.value && ta.stoch_rsi.value.stoch_k <= 20 && ta.stoch_rsi.value.stoch_d <= 20) { %>
                                     <i title="<%= Math.round(ta.stoch_rsi.value.stoch_k * 100) / 100 %>" class="far fa-circle text-green-600"></i>
                                 <% } else if (ta && ta.stoch_rsi && ta.stoch_rsi.value) { %>
-                                    <i title="<%= Math.round(ta.stoch_rsi.value.stoch_k * 100) / 100 %>" class="far fa-arrow-alt-circle-up <%= ta.stoch_rsi.value.stoch_k >= ta.stoch_rsi.value.stoch_d ? 'trend-up text-green-600' : 'trend-down text-red-600' %>"></i>
+                                    <i title="<%= Math.round(ta.stoch_rsi.value.stoch_k * 100) / 100 %>" class="far fa-circle-arrow-up <%= ta.stoch_rsi.value.stoch_k >= ta.stoch_rsi.value.stoch_d ? 'trend-up text-green-600' : 'trend-down text-red-600' %>"></i>
                                 <% } else { %>-<% } %>
                             </td>
                             <td class="border border-gray-200 px-2 py-1 <%= (ta && ta.ao && ta.ao.value) ? (ta.ao.value > 0 ? 'text-green-600' : 'text-red-600') : '' %>">
@@ -121,7 +121,7 @@
                             </td>
                             <td class="border border-gray-200 px-2 py-1 <%= (ta && ta.macd && ta.macd.value && ta.macd.value.histogram !== undefined) ? (ta.macd.value.histogram > 0 ? 'text-green-600' : 'text-red-600') : '' %>">
                                 <% if (ta && ta.macd && ta.macd.value && ta.macd.value.histogram !== undefined) { %>
-                                    <i title="<%= ta.macd.crossed || '-' %>m ago" class="far fa-arrow-alt-circle-up <%= ta.macd.trend == 'up' ? 'trend-up' : 'trend-down' %> <%= ((ta.macd.value.histogram > 0 && ta.macd.trend == 'down') || (ta.macd.value.histogram < 0 && ta.macd.trend == 'up')) ? 'font-bold' : '' %> <%= ta.macd.crossed_index && ta.macd.crossed_index < 5 ? 'blink' : '' %>"></i>
+                                    <i title="<%= ta.macd.crossed || '-' %>m ago" class="far fa-circle-arrow-up <%= ta.macd.trend == 'up' ? 'trend-up' : 'trend-down' %> <%= ((ta.macd.value.histogram > 0 && ta.macd.trend == 'down') || (ta.macd.value.histogram < 0 && ta.macd.trend == 'up')) ? 'font-bold' : '' %> <%= ta.macd.crossed_index && ta.macd.crossed_index < 5 ? 'blink' : '' %>"></i>
                                 <% } else { %>-<% } %>
                             </td>
                             <td class="border border-gray-200 px-2 py-1 <%= (ta && ta.mfi && ta.mfi.value) ? [
diff --git a/views/dashboard/settings.ejs b/views/dashboard/settings.ejs
@@ -84,7 +84,7 @@
                                             </td>
                                             <td class="border border-gray-200 px-2 py-1 text-center">
                                                 <button type="button" onclick="removePair(this)" class="text-red-600 hover:text-red-800 cursor-pointer">
-                                                    <i class="fas fa-times"></i>
+                                                    <i class="fas fa-xmark"></i>
                                                 </button>
                                             </td>
                                         </tr>
@@ -315,7 +315,7 @@ function addPair() {
         </td>
         <td class="border border-gray-200 px-2 py-1 text-center">
             <button type="button" onclick="removePair(this)" class="text-red-600 hover:text-red-800 cursor-pointer">
-                <i class="fas fa-times"></i>
+                <i class="fas fa-xmark"></i>
             </button>
         </td>
     `;
diff --git a/views/desk/form.ejs b/views/desk/form.ejs
@@ -98,7 +98,7 @@
                                         </td>
                                         <td class="border border-gray-200 px-2 py-1 text-center">
                                             <button type="button" onclick="removePair(this)" class="text-red-600 hover:text-red-800 cursor-pointer">
-                                                <i class="fas fa-times"></i>
+                                                <i class="fas fa-xmark"></i>
                                             </button>
                                         </td>
                                     </tr>
@@ -308,7 +308,7 @@ function addPair() {
         </td>
         <td class="border border-gray-200 px-2 py-1 text-center">
             <button type="button" onclick="removePair(this)" class="text-red-600 hover:text-red-800 cursor-pointer">
-                <i class="fas fa-times"></i>
+                <i class="fas fa-xmark"></i>
             </button>
         </td>
     `;
diff --git a/views/desk/index.ejs b/views/desk/index.ejs
@@ -62,7 +62,7 @@
                                     </td>
                                     <td class="border border-gray-200 px-2 py-1 text-center whitespace-nowrap">
                                         <a href="/desk/<%= index %>/edit" class="inline-block px-3 py-1 text-xs bg-green-100 text-green-700 hover:bg-green-200 rounded cursor-pointer">
-                                            <i class="fas fa-edit mr-1"></i>Edit
+                                            <i class="fas fa-pen-to-square mr-1"></i>Edit
                                         </a>
                                         <form action="/desk/<%= index %>/delete" method="POST" class="inline ml-1">
                                             <button type="submit" class="px-3 py-1 text-xs bg-red-100 text-red-700 hover:bg-red-200 rounded cursor-pointer" onclick="return confirm('Delete desk &quot;<%= desk.name %>&quot;?');">
diff --git a/views/error.ejs b/views/error.ejs
@@ -4,7 +4,7 @@
         <div class="bg-white border border-gray-200 rounded-lg shadow-sm">
             <div class="p-6 text-center">
                 <div class="mb-4">
-                    <i class="fas fa-exclamation-triangle text-6xl text-red-500"></i>
+                    <i class="fas fa-triangle-exclamation text-6xl text-red-500"></i>
                 </div>
                 <h1 class="text-2xl font-bold text-gray-800 mb-2"><%= title %></h1>
                 <p class="text-gray-600 mb-6"><%= message %></p>
diff --git a/views/layout.ejs b/views/layout.ejs
@@ -9,7 +9,7 @@
     <link rel="icon" href="/favicon.ico"/>
 
     <!-- Font Awesome Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.2.0/css/all.min.css">
     <!-- Tailwind CSS 4 -->
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <!-- Slim Select -->
diff --git a/views/orders/index.ejs b/views/orders/index.ejs
@@ -10,7 +10,7 @@
 
         <% if (typeof errors !== 'undefined' && errors.length > 0) { %>
             <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
-                <div class="font-medium mb-2"><i class="fas fa-exclamation-triangle"></i> Errors loading pairs:</div>
+                <div class="font-medium mb-2"><i class="fas fa-triangle-exclamation"></i> Errors loading pairs:</div>
                 <ul class="text-sm list-disc list-inside">
                     <% errors.forEach(function(err) { %>
                         <li><%= err %></li>
@@ -52,7 +52,7 @@
                         </table>
                     <% } else { %>
                         <div class="px-4 py-8 text-center text-gray-500">
-                            <i class="fas fa-exclamation-circle text-4xl mb-3 text-gray-300"></i>
+                            <i class="fas fa-circle-exclamation text-4xl mb-3 text-gray-300"></i>
                             <p>No pairs found.</p>
                             <a href="/profiles" class="text-blue-600 hover:underline">Configure profiles</a>
                         </div>
diff --git a/views/orders/orders.ejs b/views/orders/orders.ejs
@@ -12,7 +12,7 @@
 
         <% if (typeof pairErrors !== 'undefined' && pairErrors.length > 0) { %>
             <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
-                <div class="font-medium mb-2"><i class="fas fa-exclamation-triangle"></i> Errors loading pairs:</div>
+                <div class="font-medium mb-2"><i class="fas fa-triangle-exclamation"></i> Errors loading pairs:</div>
                 <ul class="text-sm list-disc list-inside">
                     <% pairErrors.forEach(function(err) { %>
                         <li><%= err %></li>
@@ -23,7 +23,7 @@
 
         <% if (typeof error !== 'undefined' && error) { %>
             <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
-                <i class="fas fa-exclamation-circle"></i> <%= error %>
+                <i class="fas fa-circle-exclamation"></i> <%= error %>
             </div>
         <% } %>
 
@@ -113,8 +113,8 @@
                         </div>
 
                         <div class="px-4 py-3 border-t border-gray-200 flex gap-2">
-                            <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 cursor-pointer text-sm" name="side" value="buy"><i class="fas fa-shopping-cart"></i> Buy</button>
-                            <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 cursor-pointer text-sm" name="side" value="sell"><i class="far fa-trash-alt"></i> Sell</button>
+                            <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 cursor-pointer text-sm" name="side" value="buy"><i class="fas fa-cart-shopping"></i> Buy</button>
+                            <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 cursor-pointer text-sm" name="side" value="sell"><i class="far fa-trash-can"></i> Sell</button>
                         </div>
                     </form>
                 </div>
@@ -128,7 +128,7 @@
                         <span class="font-medium">Open Orders <span id="orders-count" class="text-gray-400"></span></span>
                         <div class="flex items-center gap-2">
                             <button id="refresh-orders" class="text-gray-400 hover:text-blue-600 cursor-pointer" title="Refresh Orders">
-                                <i class="fas fa-sync-alt"></i>
+                                <i class="fas fa-arrows-rotate"></i>
                             </button>
                             <a href="/orders/<%= profile.id %>/<%= encodeURIComponent(pair) %>/cancel-all" class="text-gray-400 hover:text-red-600" title="Cancel All" onclick="return confirm('Cancel all orders?')">
                                 <i class="fas fa-trash"></i>
diff --git a/views/profile/index.ejs b/views/profile/index.ejs
@@ -16,7 +16,7 @@
 
         <% if (profiles.length === 0) { %>
             <div class="bg-white border border-gray-200 rounded p-8 text-center text-gray-400">
-                <i class="fas fa-user-circle text-4xl mb-3"></i>
+                <i class="fas fa-circle-user text-4xl mb-3"></i>
                 <p>No profiles configured yet.</p>
                 <a href="/profiles/new" class="text-blue-600 hover:underline">Create your first profile</a>
             </div>
@@ -38,7 +38,7 @@
                                 <% if (profile.apiKey) { %>
                                     <i class="fas fa-key text-green-500 mr-1"></i> API configured
                                 <% } else { %>
-                                    <i class="fas fa-exclamation-circle text-yellow-500 mr-1"></i> No API key
+                                    <i class="fas fa-circle-exclamation text-yellow-500 mr-1"></i> No API key
                                 <% } %>
                             </div>
                         </div>
diff --git a/views/profile/view.ejs b/views/profile/view.ejs
diff --git a/views/settings.ejs b/views/settings.ejs
diff --git a/views/settings/index.ejs b/views/settings/index.ejs
diff --git a/views/settings/notifications.ejs b/views/settings/notifications.ejs
diff --git a/views/settings/webserver.ejs b/views/settings/webserver.ejs
diff --git a/views/signals.ejs b/views/signals.ejs
diff --git a/views/trades.ejs b/views/trades.ejs
