As a visitor, I want the "GitHub" link in the navbar to use the GitHub icon instead of plain text so that it’s easier to recognize and visually consistent with other Docusaurus sites.
🧠 Context
Right now, the top navigation bar includes a plain text link labeled "GitHub". Instead, we want to display the GitHub icon, as shown on the [official Docusaurus site](https://docusaurus.io/docs/cli).
✅ Example (what we want):

🔗 Current Icon (from Docusaurus docs):

This appears to be a built-in feature of Docusaurus — it’s likely just a matter of updating the navbar configuration in docusaurus.config.ts.
🛠️ Implementation Plan
-
Open docusaurus.config.ts
-
Update the navbar item for GitHub
- Replace the current text-based item with one that uses the built-in icon
Example from the Docusaurus site:
navbar: {
items: [
{
href: 'https://github.com/CarletonComputerScienceSociety/handbook',
position: 'right',
className: 'header-github-link',
'aria-label': 'GitHub repository',
},
]
}
-
Ensure icon CSS is included
- Docusaurus automatically provides the icon if you use the
header-github-link class
-
Test the navbar
- Verify that the GitHub icon appears and links to the correct repository
- Confirm it looks correct in both light and dark mode
✅ Acceptance Criteria
As a visitor, I want the "GitHub" link in the navbar to use the GitHub icon instead of plain text so that it’s easier to recognize and visually consistent with other Docusaurus sites.
🧠 Context
Right now, the top navigation bar includes a plain text link labeled
"GitHub". Instead, we want to display the GitHub icon, as shown on the [official Docusaurus site](https://docusaurus.io/docs/cli).✅ Example (what we want):
🔗 Current Icon (from Docusaurus docs):
This appears to be a built-in feature of Docusaurus — it’s likely just a matter of updating the navbar configuration in
docusaurus.config.ts.🛠️ Implementation Plan
Open
docusaurus.config.tsUpdate the navbar item for GitHub
Example from the Docusaurus site:
Ensure icon CSS is included
header-github-linkclassTest the navbar
✅ Acceptance Criteria