chore(fonticons): update details and demos related to font icons (#462)

telerik · Oct 4, 2023 · 58bc082 · 58bc082
1 parent 4bc9a88
commit 58bc082
Show file tree

Hide file tree

Showing 12 changed files with 732 additions and 671 deletions.
diff --git a/docs/styling/examples/icons/actions/main.html b/docs/styling/examples/icons/actions/main.html
@@ -1,5 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"
+    />
 
 <head>
     <meta charset="UTF-8">
@@ -9,79 +22,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
 
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-undo"></span> .k-i-undo</li>
         <li><span class="k-icon k-font-icon k-i-redo"></span> .k-i-redo</li>
@@ -156,6 +169,5 @@
         <li><span class="k-icon k-font-icon k-i-plus-sm"></span> .k-i-plus-sm</li>
         <li><span class="k-icon k-font-icon k-i-minus-sm"></span> .k-i-minus-sm</li>
     </ul>
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/docs/styling/examples/icons/alerts-n-notifications/main.html b/docs/styling/examples/icons/alerts-n-notifications/main.html
@@ -1,5 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"
+    />
 
 <head>
     <meta charset="UTF-8">
@@ -9,79 +22,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
 
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-notification"></span> .k-i-notification<br /> .k-i-bell</li>
         <li><span class="k-icon k-font-icon k-i-information"></span> .k-i-information<br /> .k-i-info</li>
@@ -90,4 +103,4 @@
     </ul> 
 </body>
 
-</html>
+</html>