Add labels with icons example to tabs docs (#1147)

Author: tcbegley

docs/components_page/components/tabs.md

@@ -35,6 +35,30 @@ To apply certain styles only to the currently active tab, you can use the `activ
 
 {{example:components/tabs/active_style.py:tabs}}
 
+## Labels with icons
+
+Unfortunately it is currently only possible to use strings for tab labels, and not arbitrary Dash components. It is possible however to use some custom CSS to add icons to tabs as this example shows. If you try this yourself, make sure you [link the FontAwesome CSS](https://www.dash-bootstrap-components.com/docs/icons/).
+
+```css
+#labelled-tabs .nav-item .nav-link::after {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 200;
+  font-style: normal;
+  margin: 0px 0px 0px 10px;
+  text-decoration: none;
+}
+
+#labelled-tabs .nav-item:nth-child(1) .nav-link::after {
+  content: '\f005';
+}
+
+#labelled-tabs .nav-item:nth-child(2) .nav-link::after {
+  content: '\f2bd';
+}
+```
+
+{{example:components/tabs/labels_with_icons.py:tabs}}
+
 {{apidoc:src/components/tabs/Tabs.js}}
 
 {{apidoc:src/components/tabs/Tab.js}}

docs/components_page/components/tabs/labels_with_icons.py

@@ -0,0 +1,16 @@
+import dash_bootstrap_components as dbc
+from dash import html
+
+tabs = dbc.Tabs(
+    [
+        dbc.Tab(
+            html.Div("This is the content of tab 1", className="p-4"),
+            label="Tab 1",
+        ),
+        dbc.Tab(
+            html.Div("This is the content of tab 2", className="p-4"),
+            label="Tab 2",
+        ),
+    ],
+    id="labelled-tabs",
+)

docs/static/docs.css

@@ -65,7 +65,7 @@ span.hljs-meta {
 }
 
 .docs-sidebar .nav-link {
-  color:  var(--bs-body-color)
+  color:  var(--bs-body-color);
   padding: 0.3rem 0.5rem 0.3rem 1rem;
   border-left: 2px solid transparent;
 }
@@ -152,6 +152,23 @@ span.hljs-meta {
   outline: none;
 }
 
+/* css for labelled tabs */
+#labelled-tabs .nav-item .nav-link::after {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 200;
+  font-style: normal;
+  margin: 0px 0px 0px 10px;
+  text-decoration: none;
+}
+
+#labelled-tabs .nav-item:nth-child(1) .nav-link::after {
+  content: '\f005';
+}
+
+#labelled-tabs .nav-item:nth-child(2) .nav-link::after {
+  content: '\f2bd';
+}
+
 /* radio button group example */
 .button-group-demo .radio-group .form-check {
   padding-left: 0;

docs/templates/partials/head.html

@@ -8,3 +8,4 @@
 <link rel="stylesheet" href="/static/docs.css" />
 <link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.ico" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.7.2/css/all.css" />