Add inline icons to formatting guide (opensearch-project#3785)

* Add inline icons to formatting guide

Signed-off-by: Fanit Kolchina <[email protected]>

* Added space for formatting

Signed-off-by: Fanit Kolchina <[email protected]>

* Apply suggestions from code review

Co-authored-by: Nathan Bower <[email protected]>

---------

Signed-off-by: Fanit Kolchina <[email protected]>
Co-authored-by: Nathan Bower <[email protected]>

FORMATTING_GUIDE.md

@@ -12,6 +12,7 @@ This guide provides an overview of the formatted elements commonly used in the O
 * [Dashes](#dashes)
 * [Horizontal rule](#horizontal-rule)
 * [Images](#images)
+  * [Images in line with text](#images-in-line-with-text)
 * [Labels](#labels)
 * [Links](#links)
 * [Lists](#lists)
@@ -150,6 +151,14 @@ Do not place an image next to text or insert artificial line breaks using `<br>`
 
 If the image is under a list item, place it on a new line with a tab. For more examples, see [Lists with code snippets or images](#lists-with-code-snippets-or-images).
 
+### Images in line with text
+
+When describing an icon, use the icon's name followed by an inline image in parentheses. Insert the image in line with text using the `nomarkdown` extension and an HTML image:
+
+```
+Choose the play icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/play-icon.png" class="inline-icon" alt="play icon"/>{:/}) on the top right of the request.
+```
+
 ## Labels
 
 You can use the following labels:

_dashboards/run-queries.md

@@ -39,7 +39,7 @@ OpenSearch provides autocomplete suggestions for fields, indexes and their alias
 
 ## Sending the request 
 
-To send a query to OpenSearch, select the query by placing the cursor anywhere in the query text. Then choose the triangle on the top right of the request or press `Ctrl/Cmd+Enter`:
+To send a query to OpenSearch, select the query by placing the cursor anywhere in the query text. Then choose the play icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/play-icon.png" class="inline-icon" alt="play icon"/>{:/}) on the upper right of the request or press `Ctrl/Cmd+Enter`:
 
 <img src="{{site.url}}{{site.baseurl}}/images/dev-tools/dev-tools-send.png" alt="Send request">
 
@@ -79,17 +79,17 @@ GET shakespeare/_search
 
 If you paste a `curl` command directly into the console, the command is automatically converted into the format the console uses. 
 
-To import a query in cURL format, select the query, then select the wrench icon and choose **Copy as cURL**:
+To import a query in cURL format, select the query, select the wrench icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/wrench-icon.png" class="inline-icon" alt="wrench icon"/>{:/}), and choose **Copy as cURL**:
 
 <img src="{{site.url}}{{site.baseurl}}/images/dev-tools/dev-tools-tools.png" alt="Console tools">
 
 ## Viewing documentation
 
-To view the OpenSearch documentation, select the wrench icon, and choose **Open documentation**.
+To view the OpenSearch documentation, select the wrench icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/wrench-icon.png" class="inline-icon" alt="wrench icon"/>{:/}) and choose **Open documentation**.
 
 ## Auto indenting
 
-To use auto indent, select the queries that you want to format, select the wrench icon, and choose **Auto indent**.
+To use auto indent, select the queries that you want to format, select the wrench icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/wrench-icon.png" class="inline-icon" alt="wrench icon"/>{:/}), and choose **Auto indent**.
 
 Auto indenting a collapsed query expands it.
 

_sass/custom/custom.scss

@@ -128,6 +128,12 @@ img {
   box-shadow: none;
 }
 
+.inline-icon {
+  @extend .no-border;
+  height: 1.2rem;
+  vertical-align: middle;
+}
+
 .img-border {
   border: 1px solid $grey-lt-300;
 }