Icons docs

README.md

@@ -54,10 +54,10 @@ The system continuously scans the network for, **New devices**, **New connection
   - 🌟(Experimental) [Plugin system](https://github.com/jokob-sk/Pi.Alert/tree/main/front/plugins)
     - Create custom plugins with automatically generated settings and UI. 
     - Monitor anything for changes
-    - Check the instructions carefully if you are up for a challenge! Current plugins include:
+    - Check the [instructions](https://github.com/jokob-sk/Pi.Alert/tree/main/front/plugins) carefully if you are up for a challenge! Current plugins include:
-      - Detecting Rogue DHCP servers
+      - Detecting Rogue DHCP servers via NMAP
       - Monitoring HTTP status changes of domains/URLs 
-      - Import devices from DHCP.leases files or a UniFi controller
+      - Import devices from DHCP.leases files, a UniFi controller, or an SNMP enabled router
 
   | ![Screen 1][screen1] | ![Screen 2][screen2] | ![Screen 5][screen5]  |
   |----------------------|----------------------| ----------------------| 

docs/ICONS.md

@@ -0,0 +1,20 @@
+## Icons overview
+
+Icons are used to visually distinguish devices in the app in most of the device listing tables and the [network tree](/docs/NETWORK_TREE.md). Currently only free [Font Awesome](https://fontawesome.com/search?o=r&m=free) icons (up-to v 6.4.0) are supported (I have an unblockable [sponsorship goal](https://github.com/sponsors/jokob-sk) to add the material design icon pack).  
+
+![Raspberry Pi with a brand icon](/docs/img/ICONS/devices-icons.png)
+
+## ⚙ How to use custom device Icons
+
+You can assign icons individually on each device in the Details tab.
+
+![Raspberry Pi device details](/docs/img/ICONS/device-icon.png)
+
+- You can click into the `Icon` field or click the Pencil (2) icon in the above screenshot to enter any text. Only [free Font Awesome](https://fontawesome.com/search?o=r&m=free) icons in the following format will work:
+
+  1. For any value that is only prefixed with `fa-`, you can enter the value directly, such as `server`, `tv`, `ethernet`. 
+  2. If you want to add another classname, e.g. `fa-brands`, you can enter `brands fa-[fontawesome-icon-name]`, so for `apple` that is using the syntax`fa-brands fa-apple`, you would enter `brands fa-apple`.
+
+- If you want to mass-apply an icon to all devices of the same device type (Field marked (4) in the above screenshot), you can click the copy button (Marked (1) in the above screenshot). A confirmation prompt is dispalyed. If you proceed, icons of all devices set to the same device type as the current device, will be overwritten with the current devices icon.
+
+- The dropdown (3) contains all icons already used in the app for device icons. You need to navigate away or refresh the page once you add a new icon. 

docs/SUBNETS.md

@@ -9,7 +9,7 @@ For example, a `/24` mask results in 256 IPs to check, where as a `/16` mask che
 - Run `iwconfig` in your container to find your interface name(s) (e.g.: `eth0`, `eth1`). 
 - Append e.g.: ` -vlan=107` to the interface field (e.g.: `eth0 -vlan=107`) for multiple vlans. More details in this [comment in this issue](https://github.com/jokob-sk/Pi.Alert/issues/170#issuecomment-1419902988)
 
-### Example:
+### 🔍Example:
 
 ![Vlan configuration example](/docs/img/SUBNETS/subnets_vlan.png)
 

front/deviceDetails.php

@@ -194,7 +194,7 @@
                       <div class="form-group">
                         <label class="col-sm-3 control-label">
                           <?= lang('DevDetail_Icon');?> 
-                          <a href="https://fontawesome.com/search?q=laptop&o=r&m=free" target="_blank"> <span><i class="fa fa-fw fa-arrow-up-right-from-square"></i></a><span>
+                          <a href="https://github.com/jokob-sk/Pi.Alert/blob/main/docs/ICONS.md" target="_blank"> <span><i class="fa fa-circle-question"></i></a><span>
                         </label>
                         <div class="col-sm-9">
                           <div class="input-group">

front/php/templates/language/en_us.php

@@ -214,7 +214,7 @@ $lang['en_us'] = array(
 'DevDetail_button_Reset' => 'Reset Changes',
 'DevDetail_button_Save' => 'Save',
 'DevDetail_button_OverwriteIcons' => 'Overwrite Icons',
-'DevDetail_button_OverwriteIcons_Tooltip' => 'Overwrite icons of all devices with the same type',
+'DevDetail_button_OverwriteIcons_Tooltip' => 'Overwrite icons of all devices with the same device type',
 'DevDetail_button_OverwriteIcons_Warning' => 'Are you sure you want to overwrite all icons of all devices with the same device type as the current device type?',
 'DevDetail_SessionTable_Order' => 'Order',
 'DevDetail_SessionTable_Connection' => 'Connection',