Use Font Awesome icons for action buttons

Scott Kurtzeborn · Scott Kurtzeborn · commit b3f9c3cfb6cc · 2026-01-17T12:32:27.000-08:00
diff --git a/web/index.html b/web/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>k61.dev URL Shortener</title>
     <meta name="description" content="Fast, free URL shortener with analytics" />
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/web/src/components/Dashboard.jsx b/web/src/components/Dashboard.jsx
@@ -160,17 +160,17 @@ function Dashboard() {
                   <div className="url-stat">📅 {new Date(url.createdAt).toLocaleDateString()}</div>
                   <div className="url-actions">
                     <button
-                      className="btn btn-sm"
+                      className="btn btn-icon"
                       onClick={() => copyToClipboard(url.shortUrl)}
                       title="Copy"
                     >
-                      📋
+                      <i className="fa fa-copy"></i>
                     </button>
-                    <button className="btn btn-sm" onClick={() => startEdit(url)} title="Edit">
-                      ✏️
+                    <button className="btn btn-icon" onClick={() => startEdit(url)} title="Edit">
+                      <i className="fa fa-pencil"></i>
                     </button>
-                    <button className="btn btn-sm btn-danger" onClick={() => handleDelete(url.id)} title="Delete">
-                      🗑️
+                    <button className="btn btn-icon btn-icon-danger" onClick={() => handleDelete(url.id)} title="Delete">
+                      <i className="fa fa-trash-o"></i>
                     </button>
                   </div>
                 </li>
diff --git a/web/src/index.css b/web/src/index.css
@@ -155,20 +155,23 @@ code {
   gap: 5px;
 }
 
-.btn-sm {
-  padding: 5px 8px;
+.btn-icon {
+  padding: 6px 10px;
   font-size: 14px;
-  background: #f0f0f0;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  background: transparent;
+  border: none;
+  color: #666;
   cursor: pointer;
+  border-radius: 4px;
 }
 
-.btn-sm:hover {
-  background: #e0e0e0;
+.btn-icon:hover {
+  background: #f0f0f0;
+  color: #0066cc;
 }
 
-.btn-sm.btn-danger:hover {
+.btn-icon-danger:hover {
+  color: #dc3545;
   background: #ffebee;
 }
 
