From 07024dc53ad7f274d8f8669df92d29b2dda6be3c Mon Sep 17 00:00:00 2001 From: Petar Todorov <41293735+PekoPPT@users.noreply.github.com> Date: Wed, 4 Oct 2023 18:52:38 +0300 Subject: [PATCH] chore(fonticons): update details and demos related to font icons --- docs/styling/examples/icons/actions/main.html | 140 ++++++++++-------- .../icons/alerts-n-notifications/main.html | 137 +++++++++-------- docs/styling/examples/icons/editing/main.html | 128 ++++++++-------- .../examples/icons/files-n-folders/main.html | 128 ++++++++-------- docs/styling/examples/icons/images/main.html | 127 ++++++++-------- .../icons/layout-n-navigation/main.html | 128 ++++++++-------- docs/styling/examples/icons/mapping/main.html | 128 ++++++++-------- docs/styling/examples/icons/media/main.html | 127 ++++++++-------- .../examples/icons/social-sharing/main.html | 128 ++++++++-------- docs/styling/examples/icons/toggle/main.html | 128 ++++++++-------- docs/styling/icons.mdx | 66 ++++++--- docs/troubleshooting/csp.md | 38 ++++- 12 files changed, 732 insertions(+), 671 deletions(-) diff --git a/docs/styling/examples/icons/actions/main.html b/docs/styling/examples/icons/actions/main.html index 9fd84bc..c55eb35 100644 --- a/docs/styling/examples/icons/actions/main.html +++ b/docs/styling/examples/icons/actions/main.html @@ -1,5 +1,18 @@ + + + + + @@ -9,79 +22,79 @@ - + - + - - - \ No newline at end of file + + diff --git a/docs/styling/examples/icons/alerts-n-notifications/main.html b/docs/styling/examples/icons/alerts-n-notifications/main.html index 2f0e29b..48a15b3 100644 --- a/docs/styling/examples/icons/alerts-n-notifications/main.html +++ b/docs/styling/examples/icons/alerts-n-notifications/main.html @@ -1,5 +1,18 @@ + + + + + @@ -9,79 +22,79 @@ - + - + - \ No newline at end of file + diff --git a/docs/styling/examples/icons/editing/main.html b/docs/styling/examples/icons/editing/main.html index 11bccbd..411bf4c 100644 --- a/docs/styling/examples/icons/editing/main.html +++ b/docs/styling/examples/icons/editing/main.html @@ -10,80 +10,79 @@ - - - + + - - - \ No newline at end of file + + diff --git a/docs/styling/examples/icons/files-n-folders/main.html b/docs/styling/examples/icons/files-n-folders/main.html index dd91ee2..cd45835 100644 --- a/docs/styling/examples/icons/files-n-folders/main.html +++ b/docs/styling/examples/icons/files-n-folders/main.html @@ -10,80 +10,79 @@ - - - + + - - - \ No newline at end of file + + diff --git a/docs/styling/examples/icons/images/main.html b/docs/styling/examples/icons/images/main.html index 2b03f66..fe96e01 100644 --- a/docs/styling/examples/icons/images/main.html +++ b/docs/styling/examples/icons/images/main.html @@ -10,79 +10,79 @@ - + - + - - - \ No newline at end of file + + diff --git a/docs/styling/examples/icons/layout-n-navigation/main.html b/docs/styling/examples/icons/layout-n-navigation/main.html index b39ce9a..69f3af9 100644 --- a/docs/styling/examples/icons/layout-n-navigation/main.html +++ b/docs/styling/examples/icons/layout-n-navigation/main.html @@ -10,80 +10,79 @@ - - - + + - - - \ No newline at end of file + + diff --git a/docs/styling/examples/icons/mapping/main.html b/docs/styling/examples/icons/mapping/main.html index 879d9d7..6c7cf3a 100644 --- a/docs/styling/examples/icons/mapping/main.html +++ b/docs/styling/examples/icons/mapping/main.html @@ -10,80 +10,79 @@ - - - + + - - - \ No newline at end of file + + diff --git a/docs/styling/examples/icons/media/main.html b/docs/styling/examples/icons/media/main.html index d6f8cde..f12f7a2 100644 --- a/docs/styling/examples/icons/media/main.html +++ b/docs/styling/examples/icons/media/main.html @@ -10,79 +10,79 @@ - + - + - - - \ No newline at end of file + + diff --git a/docs/styling/examples/icons/social-sharing/main.html b/docs/styling/examples/icons/social-sharing/main.html index bfe6d46..8de526b 100644 --- a/docs/styling/examples/icons/social-sharing/main.html +++ b/docs/styling/examples/icons/social-sharing/main.html @@ -10,80 +10,79 @@ - - - + + - - - \ No newline at end of file + + diff --git a/docs/styling/examples/icons/toggle/main.html b/docs/styling/examples/icons/toggle/main.html index 90a11d6..860881e 100644 --- a/docs/styling/examples/icons/toggle/main.html +++ b/docs/styling/examples/icons/toggle/main.html @@ -10,80 +10,79 @@ - - - + + - - - \ No newline at end of file + + diff --git a/docs/styling/icons.mdx b/docs/styling/icons.mdx index 9ef2804..829ffc2 100644 --- a/docs/styling/icons.mdx +++ b/docs/styling/icons.mdx @@ -27,13 +27,41 @@ Font icons demonstrate significant benefits such as: ## Basic Usage -To use the Kendo UI for Vue font icons: +To use the Kendo UI font icons: -1. [Load](slug:themesandstyles) a Kendo UI for Vue theme into your project. -2. Assign a `k-icon` CSS class followed by a predefined class from the [list of font icons](#toc-list-of-font-icons) to an HTML tag. For example, the `` element as demonstrated in the following example. +1. [Load a Kendo UI theme](slug:themesandstyles) in your project. +1. Load the font icons either by [using the precompiled CSS](#toc-loading-icons-through-precompiled-css) or by [using a CDN link](#toc-loading-icons-through-a-cdn). +1. Add an empty `` element that will hold the font icon. +1. Assign a `k-icon k-font-icon` CSS classes that are followed by a predefined class from the [list of font icons](#toc-list-of-font-icons) to an HTML tag. For example: + ```html + `. + ``` + +### Loading Icons through Precompiled CSS + +1. To load the font icons by using precompiled CSS, install the `Kendo Font Icons` package through NPM. + + ```sh + npm i @progress/kendo-font-icons + ``` + +1. Import the precompiled CSS by using the following: + + - Import the font icons in the `styles.scss` file. + + ```scss + @import "@progress/kendo-font-icons/dist/index.css"; + ``` + +### Loading Icons through a CDN + +Import the font icons by using the following CDN link in your `index.html` file. ```html - + ``` ## Rendering with Unicode Numbers @@ -41,7 +69,7 @@ To use the Kendo UI for Vue font icons: Though the web icon font comes with a [set of predefined CSS classes](#toc-list-of-font-icons), you might need to use the icons with a custom CSS class name. To achieve this, set a `:before` pseudo content value for the relevant icon. ```html - +