Added inline icons and fixed typo in contributing

CONTRIBUTING.md

@@ -337,7 +337,7 @@ Below is a list of available icons (some are aliases):
 
 ### InfluxDB UI left navigation icons
 In many cases, documentation references an item in the left nav of the InfluxDB UI.
-To provide a visual example of the the navigation item using the `nav-icon` shortcode.
+Provide a visual example of the the navigation item using the `nav-icon` shortcode.
 
 ```
 {{< nav-icon "Tasks" >}}

content/v2.0/collect-data/advanced-telegraf.md

@@ -25,7 +25,9 @@ Follow the steps below to use the InfluxDB UI to create a Telegraf configuration
 1. Open a web browser to access the InfluxDB 2.0 user interface
    ([localhost:9999](http://localhost:9999)). The **Getting started with InfluxDB 2.0** screen appears.
 2. To access the **Telegraf Configurations** page, use either of the following two paths:
-    * Click **Organizations** in the navigation bar on the far left of the page, click on an organization, and then click the **Telegraf** tab.
+    * Click **Organizations** in the navigation bar on the far left of the page.  
+    {{< nav-icon "orgs" >}}
+    * Click on an organization, and then click the **Telegraf** tab.
     * Click **Configure a Data Collector** and then select the **Telegraf** tab.
 3. Click **Create Configuration**. The **Data Loading** page appears with the heading "Select Telegraf Plugins to add to your bucket."
 4. Select your predefined **Bucket**, select one or more of the available options (**System**, **Docker**, **Kubernetes**, **NGINX**, or **Redis**), and then click **Continue**. A page with **Plugins to Configure** appears.

content/v2.0/collect-data/scraper-metrics-endpoint.md

@@ -22,12 +22,14 @@ Follow the steps below to configure an InfluxDB scraper. The steps below use the
 
 1. Open a web browser to access the InfluxDB 2.0 user interface
    ([localhost:9999](http://localhost:9999)). The **Getting started with InfluxDB 2.0** screen appears.
-2. In the navigation bar on the left, click **Organizations** and then click the name of your organization. The **Organization** page appears for the selected organization.
-3. Click the **Scrapers** tab. A listing of any existing scrapers appears, listing the **URL** and the **BUCKET** name.
-4. Click **Create Scraper**. The **Data Loading** page appears with **Add Scraper Target** options to define a scraper.
-5. From the **Bucket** listing, select the bucket for collecting the data.
-6. Enter the **Target URL** to use for the Prometheus `/metrics` HTTP endpoint. The default URL value is `http://localhost:9999/metrics`.
-7. Click **Finish**. Your new scraper appears in the scraper listing, displaying the values you specified for the **URL** and the **BUCKET**.
+2. In the navigation bar on the left, click **Organizations**.
+ {{< nav-icon "orgs" >}}
+3. Click the name of your organization. The **Organization** page appears for the selected organization.
+4. Click the **Scrapers** tab. A listing of any existing scrapers appears, listing the **URL** and the **BUCKET** name.
+5. Click **Create Scraper**. The **Data Loading** page appears with **Add Scraper Target** options to define a scraper.
+6. From the **Bucket** listing, select the bucket for collecting the data.
+7. Enter the **Target URL** to use for the Prometheus `/metrics` HTTP endpoint. The default URL value is `http://localhost:9999/metrics`.
+8. Click **Finish**. Your new scraper appears in the scraper listing, displaying the values you specified for the **URL** and the **BUCKET**.
 
 The new scraper is now collecting data into the InfluxDB bucket you specified.
 

content/v2.0/process-data/manage-tasks/create-task.md

@@ -51,6 +51,9 @@ The InfluxDB UI provides multiple ways to create a task:
 
 ### Import a task
 1. Click on the **Tasks** icon in the left navigation menu.
+
+    {{< nav-icon "tasks" >}}
+    
 2. Click **Import** in the upper right.
 3. Drag and drop or select a file to upload.
 4. Click **Upload Task**.

content/v2.0/users/tokens/create-token.md

@@ -12,10 +12,13 @@ draft: true
 
 **To view tokens**:
 
-1. Click the ?? icon in the navigation bar.
+1. Click the **Influx** tab in the navigation bar.
+
+    {{< nav-icon "admin" >}}
+
 2. In the right panel labeled **My Settings**, click **Tokens**. All of your account's tokens appear.
 3. Click on a token name from the list to view the token and a summary of access permissions.
-<<SCREENSHOT>>
+
 
 **To copy a token**:
 
@@ -24,14 +27,3 @@ draft: true
 **To delete a token**:
 
 * Hover over the name of a token in the list, then click **Delete**.
-
-
-#### Tokens (/tokens)
-
-* Table with Description, Last Used, and Organization columns
-    * Click on token name in Description column for Edit Token overlay
-        * Unlikely that user will use it, mostly in case of emergency
-    * Click on org name in Organization column to open organization page
-* Generate token upper right
-    * Opens generate token overlay (tgo!)
-    * Also very unlikely that user will manually generate a token

content/v2.0/users/tokens/view-tokens.md

@@ -15,6 +15,9 @@ to view tokens.
 ## View tokens in the InfluxDB UI
 
 1. Click the **Influx** icon in the navigation bar.
+
+    {{< nav-icon "admin" >}}
+
 2. In the right panel labeled **My Settings**, click **Tokens**. All of your account's tokens appear.
 3. Click on a token name from the list to view the token and a summary of access permissions.
 

content/v2.0/visualize-data/dashboards.md

@@ -17,16 +17,25 @@ Create, edit, and manage dashboards from the **Dashboards** tab in the left navi
 **To create a dashboard**:
 
 1. Click the **Dashboards** icon in the navigation bar.
+
+  {{< nav-icon "dashboards">}}
+
 2. Click the **+Create Dashboard** button in the upper right.
 3. Enter a name for your dashboard in the **Name this dashboard** field in the upper left.
 
 #### Add data to your dashboard
 
-1. From your dashboard, click **Add Cell** in the upper right. The Data Explorer overlay opens.
+1. From your dashboard, click **Add Cell** in the upper right.
+
+  {{< icon "add-cell" >}}
+
+The Data Explorer overlay opens.
 2. Create a query in the Data Explorer following the instructions in [Explore metrics](/v2.0/visualize-data/explore-metrics).
 3. Enter a name for your cell in the upper left.
 4. Click the checkmark icon to save the cell to your dashboard.
 
+  {{< icon "checkmark" >}}
+
 You can also send data to your dashboard directly from the Data Explorer. For details, [Explore metrics](/v2.0/visualize-data/explore-metrics).
 
 #### Add a note to your dashboard

content/v2.0/visualize-data/explore-metrics.md

@@ -27,13 +27,16 @@ analyzing, and acting on time series data.
 See [Get started with Flux](/v2.0/query-data/get-started) to learn more about Flux.
 
 1. Click the **Data Explorer** icon in the sidebar.
+
+  {{< nav-icon "data-explorer" >}}
+
 2. Use the Flux builder in the bottom panel to select a bucket and filters such as measurement, field or tag.
    Alternatively, click **Script Editor** to manually edit the query.
    To switch back to the query builder, click **Query Builder**. Note that your updates from the Script Editor will not be saved.
 3. Use the **Functions** list to review the available Flux functions.
    Click on a function from the list to add it to your query.
 4. Click **Submit** to run your query. You can then preview your graph in the above pane.
-5. To work on multiple queries at once, click the **+** to add another tab.
+5. To work on multiple queries at once, click the {{< icon "plus" >}} to add another tab.
   * Click the eye icon on a tab to hide or show a query's visualization.
   * Click on the name of the query in the tab to rename it.
 

content/v2.0/visualize-data/sources.md

@@ -15,6 +15,9 @@ Like dashboards and buckets, data sources are scoped by organization. When you f
 **To add data to a bucket**:
 
 1. Click in the **Organizations** icon in the navigation bar.
+
+    {{< nav-icon "orgs" >}}
+
 2. Select the **Buckets** tab.
 3. Next to the name of a bucket, click **Add Data**.
 4. Select **Streaming**, **Line Protocol**, or **Scraping** from the data source options.
@@ -24,6 +27,9 @@ Like dashboards and buckets, data sources are scoped by organization. When you f
 **To manage Telegraf configurations**:
 
 1. Click in the **Organizations** icon in the navigation bar.
+
+    {{< nav-icon "orgs" >}}
+
 2. Select the **Telegraf** tab. A list of existing Telegraf configurations appears.
 3. To add a new Telegraf configuration:
   * Click **Create Configuration** in the upper right.

content/v2.0/visualize-data/visualization-types.md

@@ -31,7 +31,7 @@ To select this view, select the **Graph** option from the visualization dropdown
 
 #### Graph Controls
 
-To view **Graph** controls, click the settings (gear) icon next to the visualization dropdown in the upper right.
+To view **Graph** controls, click the settings icon ({{< icon "gear" >}}) next to the visualization dropdown in the upper right.
 
 * **Geometry**: Select from the following options:
   - **Line**: Display a time series in a line graph.
@@ -73,7 +73,7 @@ To select this view, select the **Graph + Single Stat** option from the visualiz
 
 #### Graph + Single Stat Controls
 
-To view **Graph + Single Stat** controls, click the settings (gear) icon next to the visualization dropdown in the upper right.
+To view **Graph + Single Stat** controls, click the settings icon ({{< icon "gear" >}}) next to the visualization dropdown in the upper right.
 
 * **Line Colors**: Select the a color scheme to use for your graph.
 
@@ -112,7 +112,7 @@ To select this view, select the **Histogram** option from the visualization drop
 
 #### Histogram Controls
 
-To view **Histogram** controls, click the settings (gear) icon next to the visualization dropdown in the upper right.
+To view **Histogram** controls, click the settings icon ({{< icon "gear" >}}) next to the visualization dropdown in the upper right.
 
 * **Data** section:
   * **Column**: The column to select data from.
@@ -135,7 +135,7 @@ To select this view, select the **Single Stat** option from the visualization dr
 
 #### Single Stat Controls
 
-To view **Single Stat** controls, click the settings (gear) icon next to the visualization dropdown in the upper right.
+To view **Single Stat** controls, click the settings icon ({{< icon "gear" >}}) next to the visualization dropdown in the upper right.
 
 * **Customize Single-Stat** section:  
   * **Prefix**: Prefix to be added to the single stat.
@@ -157,7 +157,7 @@ To select this view, select the **Gauge** option from the visualization dropdown
 
 #### Gauge Controls
 
-To view **Gauge** controls, click the settings (gear) icon next to the visualization dropdown in the upper right.
+To view **Gauge** controls, click the settings icon ({{< icon "gear" >}}) next to the visualization dropdown in the upper right.
 
 * **Customize Gauge** section:  
   * **Prefix**: Prefix to be added to the gauge.
@@ -182,7 +182,7 @@ To select this view, select the **Table** option from the visualization dropdown
 
 #### Table Controls
 
-To view **Table** controls, click the settings (gear) icon next to the visualization dropdown in the upper right.
+To view **Table** controls, click the settings icon ({{< icon "gear" >}}) next to the visualization dropdown in the upper right.
 
 * **Customize Table** section:
   * **Default Sort Field**: Select the default sort field. Default is **time**.