Update icons to use inline images (#112)

* replace icons with our own icon images and remove icon font integration

* remove references to font icons

* add icons to the style guide

Author: rosieyohannan

docs/contributors/modules/ROOT/pages/index.adoc

@@ -1,6 +1,5 @@
 = Contributing to CircleCI Docs
 :page-description: An overview of contributing to CircleCI docs including page templates and our style guide.
-:icons: font
 :experimental:
 
 This guide is a reference for contributors to CircleCI docs. Our style guide evolves so you will probably find older documentation does not meet the requirements set out here. Use this guide to help you write new docs, and when working on existing documentation it would be great if you can make edits to help keep everything consistent.

docs/contributors/modules/docs-style/pages/formatting.adoc

@@ -1,5 +1,4 @@
 = Formatting
-:icons: font
 :experimental:
 
 [#styling-text]

docs/contributors/modules/docs-style/pages/headings.adoc

@@ -1,5 +1,4 @@
 = Headings
-:icons: font
 
 * Write headings in a logical sequence. If you read section titles in order, the flow should present a good storyline for the doc.
 

docs/contributors/modules/docs-style/pages/links.adoc

@@ -1,5 +1,4 @@
 = Cross references and links
-:icons: font
 
 [#cross-references]
 == Cross references

docs/contributors/modules/docs-style/pages/style-and-voice.adoc

@@ -1,5 +1,4 @@
 = Style and voice
-:icons: font
 :experimental:
 
 == Talk confidently and directly

docs/contributors/modules/docs-style/pages/style-guide-overview.adoc

@@ -1,5 +1,4 @@
 = Style guide overview
-:icons: font
 
 This guide is a reference for contributors to CircleCI docs. Our style guide evolves so you will probably find older documentation does not meet the requirements set out here. Use this guide to help you write new docs, and when working on existing documentation it would be great if you can make edits to help keep everything consistent.
 

docs/contributors/modules/docs-style/pages/using-code-samples.adoc

@@ -1,5 +1,4 @@
 = Using code samples
-:icons: font
 
 
 * Provide code examples to help with clarity, and to help the reader reproduce the subject matter.

docs/contributors/modules/docs-style/pages/using-images.adoc

@@ -1,5 +1,4 @@
 = Using images
-:icons: font
 :experimental:
 
 == Guidelines for all images
@@ -36,6 +35,8 @@ image::guides:ROOT:style-guide_screenshot-sample.png[Change user icon, main]
 
 == Mark up screenshots
 
+NOTE: This section is outdated and will be updated soon.
+
 Sometimes a screenshot will need to be marked up to provide more context for a user. Below is an example of a screenshot that has been marked up with an approved color.
 
 .Example of marked up screenshot
@@ -55,3 +56,16 @@ Any text added to a screenshot should be no less than 18px, and can be larger if
 * If taking a screenshot of the CircleCI app include the sidebar menu so the reader can see what page you are on.
 
 * Think about how clear the location of your screenshot is for unfamiliar users. It is best to include the full width of the screen, if possible, so the location of what you are drawing attention to is clear. An image of a button with no wider reference can be confusing.
+
+== Icons
+
+To add an icon to the flow of text we use the image macro as follows:
+
+[source,adoc]
+----
+Some text with the edit icon image:guides:ROOT:icons/edit-solid.svg[edit icon] in it.
+----
+
+Looks like this:
+
+Some text with the edit icon image:guides:ROOT:icons/edit-solid.svg[edit icon] in it.

docs/contributors/modules/docs-style/pages/using-lists.adoc

@@ -1,5 +1,4 @@
 = Using lists
-:icons: font
 
 * To generate numbered steps (an ordered list) use the following syntax:
 +

docs/contributors/modules/docs-style/pages/using-tables.adoc

@@ -1,5 +1,4 @@
 = Using tables
-:icons: font
 
 * For markdown content use the following format for tables:
 +