Skip to content

[DOC-14369] Add an icon page #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rebecca-Martinez007 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[DOC-14369] Add an icon page #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70bd6c3
Added icon page
Rebecca-Martinez007 May 22, 2026
cccec4f
Updated page
Rebecca-Martinez007 May 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions styleguide/modules/ROOT/nav.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
** xref:dialogs.adoc[]
** xref:data-insights-area.adoc[]
** xref:dropdowns.adoc[]
** xref:icons.adoc[]
** xref:ui-links.adoc[]
** xref:menus.adoc[]
** xref:more-options.adoc[]
Expand Down
43 changes: 43 additions & 0 deletions styleguide/modules/ROOT/pages/icons.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
= Icons

Copy link
Copy Markdown
Contributor

@sarahlwelton sarahlwelton May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Use icons in the Couchbase documentation when:
* You need to describe a clickable element in the UI that does not have a name label.
* The clickable element is a Font Awesome icon.

The Couchbase documentation uses Font Awesome V4 icons.
To find the correct icon name, search the https://fontawesome.com/v4/icons/[Font Awesome V4 icon library^].

To render an icon, use the Antora `icon:` macro followed by the Font Awesome icon name and square brackets:

----
icon:fontawesome-icon[]
----

If the Font Awesome icon has hyphens, write it as listed.
For example, the circle with a plus sign icon icon:plus-circle[] is written as:

----
icon:plus-circle[]
----

TIP: To fix your icon's width and keep text aligned in vertical lists, writer `fw` in the square brackets.

To describe a clickable icon in the UI:

* If the icon has a text label, refer to it by its label, followed by the icon in parentheses.
For example:
+
----
Click *Copy* (icon:copy[]).
----
+
This renders as:
+
Click *Copy* (icon:copy[]).

* If the icon has no text label, refer to it by the icon alone.
For example:
+
----
Click icon:copy[].
----
+
This renders as:
+
Click icon:copy[].