Use an arrow to indicate child interfaces

- Add and format the arrow
- Remove the icon used to indent child interfaces (the arrow is enough)

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

scripts/js/interfaces.js

@@ -54,12 +54,13 @@ $(function () {
       }
 
       // Show an icon for indenting slave interfaces
-      const indentIcon = master === null ? "" : "<i class='fa fa-diagram-project fa-fw'></i> ";
+      const indentIcon =
+        master === null ? "" : "<span class='child-interface-icon'>&nbsp;&rdca;</span> ";
 
       var obj = {
         text: indentIcon + interface.name + " - " + status,
         class: gateways.has(interface.name) ? "text-bold" : null,
-        icon: "fa fa-network-wired fa-fw",
+        icon: master === null ? "fa fa-network-wired fa-fw" : "",
         nodes: [],
       };
 

style/pi-hole.css

@@ -1584,3 +1584,7 @@ textarea.field-sizing-content {
 .bstreeview .list-group-item:hover {
   background-color: rgba(127, 127, 127, 0.18);
 }
+.child-interface-icon {
+  line-height: 0.5em;
+  font-size: 1.7em;
+}