💄 📦 use fontawesome icons in AppBar

package.json

@@ -47,7 +47,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@floating-ui/dom": "1.6.7",
+		"@floating-ui/dom": "^1.6.7",
+		"@fortawesome/fontawesome-free": "^6.7.1",
 		"d3": "^5.16.0",
 		"d3-array": "^3.2.4",
 		"d3-color": "^3.1.0",

src/routes/+layout.svelte

@@ -60,18 +60,35 @@
 			</svelte:fragment>
 			<h1 class="text-xl app-bar-custom">PACTA Climate Alignment Tool</h1>
 			<svelte:fragment slot="trail">
-				<a
-					class="btn btn-sm variant-filled-secondary"
-					href="https://github.com/RMI-PACTA/pacta-dashboard-svelte"
-					target="_blank"
-					rel="noreferrer"
-				>
-					GitHub
-				</a>
-				<button class="btn btn-sm variant-filled-primary" on:click={downloadArchive}
-					>Save Data</button
-				>
-				<button class="btn btn-sm variant-filled-primary">Help</button>
+				<span class="btn-icon variant-filled">
+					<a
+						href="https://github.com/RMI-PACTA/pacta-dashboard-svelte"
+						target="_blank"
+						rel="noreferrer"
+						title="GitHub"
+					>
+						<i class="fab fa-xl fa-github"></i>
+					</a>
+				</span>
+				<span class="btn-icon variant-filled">
+					<button on:click={downloadArchive} title="Save data">
+						<i class="fas fa-xl fa-floppy-disk"></i>
+					</button>
+					<div class="card p-4 variant-filled-primary" data-popup="popupHover">
+						<p>Save Data</p>
+						<div class="arrow variant-filled-primary" />
+					</div>
+				</span>
+				<span class="btn-icon variant-filled">
+					<a
+						href="https://rmi.gitbook.io/pacta-knowledge-hub"
+						target="_blank"
+						rel="noreferrer"
+						title="PACTA Knowledge Hub"
+					>
+						<i class="fas fa-xl fa-question"></i>
+					</a>
+				</span>
 			</svelte:fragment>
 		</AppBar>
 	</svelte:fragment>

src/routes/+layout.ts

@@ -1 +1,2 @@
 export const prerender = true;
+import '@fortawesome/fontawesome-free/css/all.min.css';