Updated page

Author: Rebecca-Martinez007

styleguide/modules/ROOT/pages/icons.adoc

@@ -1,14 +1,24 @@
 = Icons
 
-The Couchbase documentation uses https://fontawesome.com/v4/icons/[Font Awesome V4^] icons rendered with the Antora `icon:[]` macro.
+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 `icon:` followed by the Font Awesome icon name and empty square brackets:
+To render an icon, use the Antora `icon:` macro followed by the Font Awesome icon name and square brackets:
 
 ----
 icon:fontawesome-icon[]
 ----
 
-When you need to describe a clickable icon in the UI:
+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:
@@ -17,7 +27,9 @@ For example:
 Click *Copy* (icon:copy[]).
 ----
 +
-This renders as: 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:
@@ -26,11 +38,6 @@ For example:
 Click icon:copy[].
 ----
 +
-This renders as: Click icon:copy[].
-
-== Finding Icon Names
-
-To find the correct icon name, search the https://fontawesome.com/v4/icons/[Font Awesome V4 icon library^].
-Use the name as listed, with hyphens, to the `icon:[]` macro.
-
-For example, the *trash* icon uses `icon:trash[]` and the *download* icon uses `icon:download[]`.
+This renders as: 
++
+Click icon:copy[].