Adds icon documentation to readme

README.md

@@ -2,9 +2,20 @@
 
 > A static site linking to all running services for networking, management and monitoring
 
+## Features 🌈
+
+- Instant search and full keyboard shortcuts
+- Multiple color themes, layout options and item sizes all configurable and saved directly through the browser
+- Quickly check a website, by holding down the Alt key while clicking, to open it in a resizable pop-up modal
+- Instant search- just start typing to filter items, tab to cycle through, enter or Alt + enter to open, and Esc to clear
+- Additional info for each item visible on hover (including opening method icon, description as a tooltip and domain info)
+- Small bundle size and a fully responsive UI makes the app easy to use on any device
+- Many options for icons, including full Font-Awesome support and the ability to auto-fetch icon from URLs favicon
+- Plus lots more...
+
 ---
 
-## Running the App
+## Running the App 🏃‍♂️
 
 ### Deploying 🚀
 - Get Code: `git clone git@github.com:Lissy93/dashy.git` and `cd dashy`
@@ -28,24 +39,27 @@
 
 ## Configuring 🔧
 
-### Config Locations
+### Config Locations 📍
 
-Configuration files are located in `./public/`.
+Configuration files are located in [`./public/`](https://github.com/Lissy93/dashy/tree/master/public).
 - `./public/conf.yml` - This is the main site configuration file, and is required for the app to work
 - `./public/item-icons` - If you're using custom icons for your items, then store these here. You can use sub-folders to keep things organised
 - `./public/logo.png` - Optionally add a logo image for you're website, which will show in the top left
 
 Also within `./public` you'll find normal website assets, including `favicon.ico`, `manifest.json`, `robots.txt` and `web-icons/*`. There's no need to modify these, but you can do so if you wish.
 
-### The conf.yml File
+### The Conf File 📄
 
-This is where all site configuration is stored in [YAML Format](https://yaml.org/), and is located in `./public/conf.yml`
+All app config is specified in [`/public/conf.yml`](https://github.com/Lissy93/dashy/blob/master/public/conf.yml) (in [YAML Format](https://yaml.org/)).
+All fields are optional, unless otherwise stated.
 
 **`pageInfo`**
 - `title` - String: The page title and heading
 - `description` - String: Short description visible under the heading
 
-**`appConfig`**
+**`appConfig`** _(optional)_
+- `enableFontAwesome` - Boolean: Where `true` is enabled, if left blank font-awesome will be enabled only if required by 1 or more icons
+- `fontAwesomeKey` - String: If you have a font-awesome key, then you can use it here and make use of premium icons. It is a 10-digit alpha-numeric string from you're FA kit URL  (e.g. `13014ae648`)
 - `theme`- String: The default theme for first load
 - `cssThemes` - String[]: An array of theme names which can be used in the theme switcher dropdown
 - `externalStyleSheet` - String or String[] - Either a URL to an external stylesheet or an array or URLs, which can be applied as themes within the UI
@@ -59,16 +73,22 @@ This is where all site configuration is stored in [YAML Format](https://yaml.org
   - `collapsed` - Boolean: If true, the section will  be collapsed (defaults to `false`) 
   - `rows` - Int: Number of rows the section should span vertically, e.g. 2 (defaults to `1`)
   - `cols` - Int: Number of columns the section should span horizontally, e.g. 2 (defaults to `1`)
-  - `color` - String: A custom background color for the section, as a hex code or HTML color
-  - `customStyles` - String: Custom CSS properties that should be applied to that section, separated by semicolon
+  - `color` - String: A custom background color for the section, as a hex code or HTML color (e.g. `#fff`)
+  - `customStyles` - String: Custom CSS properties that should be applied to that section, e.g. `border: 2px dashed #ff0000;`
 
 **`item`**
 - `title` - String: The text to display on the item
 - `description` - String: Additional info which is shown in the tooltip on hover
-- `icon` - String: The icon for the tile, *see below for more info*
-- `url` - String: The full path to be opened on click (e.g. https://example.com)
+- `icon` - String: Icons can be either a local image, remote image, or a Font Awesome icon,  *see below for more info*
+- `url` - String: The full path to be opened on click (e.g. `https://example.com`)
 - `target` - String: The method in which the item will be opened, either `newtab`, `sametab` or `iframe`
-- `color` - String: A custom background color the the item, as a hex code or HTML color
+- `color` - String: A custom background color the the item, as a hex code or HTML color (e.g. `#fff`)
+
+**`icon`** Examples:
+- To use use a remote image, just use it's full URL, e.g. `https://i.ibb.co/710B3Yc/space-invader-x256.png`
+- To use a local image, save it in `./public/item-icons/` or  `./public/my-category/item-icons` and specify the image as `image.png` or `my-category/image.png`. For best results, use either png or svg formats.
+- To automatically fetch the icons from the website's URL, just set icon to `favicon`
+- To use a Font-Awesome icon, specify the category (`fas`, `fab`, `far`, `fal` or`fad`), followed by a space then `fa-` and the icon name. For example: `fas fa-rocket`, `fab fa-monero`, `fal fa-duck` or `fad fa-glass-whiskey-rocks`. Note that light (`fal`) and duotone (`fad`) icons are only available with Font Awesome Pro, to use this, you need to set you're kit ID under `appConfig.fontAwesomeKey`.
 
 ---