Updated Telerik Fonts topic

styling-and-appearance/style.css

@@ -0,0 +1,310 @@
+@font-face {
+  font-family: 'telerikfont';
+  src:  url('/devtools/xamarin/fonts/telerikfont.eot?mxssen');
+  src:  url('/devtools/xamarin/fonts/telerikfont.eot?mxssen#iefix') format('embedded-opentype'),
+    url('/devtools/xamarin/fonts/telerikfont.ttf?mxssen') format('truetype'),
+    url('/devtools/xamarin/fonts/telerikfont.woff?mxssen') format('woff'),
+    url('/devtools/xamarin/fonts/telerikfont.svg?mxssen#telerikfont') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'telerikfont' !important;
+  font-size: 18px;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-badge-available:before {
+  content: "\e85b";
+}
+.icon-badge-away:before {
+  content: "\e85c";
+}
+.icon-badge-busy:before {
+  content: "\e85a";
+}
+.icon-badge-add:before {
+  content: "\e857";
+}
+.icon-badge-delete:before {
+  content: "\e858";
+}
+.icon-badge-NA:before {
+  content: "\e856";
+}
+.icon-badge-ooo:before {
+  content: "\e85d";
+}
+.icon-sort_descent:before {
+  content: "\e800";
+}
+.icon-spinner2:before {
+  content: "\e801";
+}
+.icon-filter:before {
+  content: "\e802";
+}
+.icon-sort_ascent:before {
+  content: "\e803";
+}
+.icon-group:before {
+  content: "\e804";
+}
+.icon-right-open-big:before {
+  content: "\e805";
+}
+.icon-right-dir:before {
+  content: "\e806";
+}
+.icon-dots_vert:before {
+  content: "\e807";
+}
+.icon-menu:before {
+  content: "\e808";
+}
+.icon-check:before {
+  content: "\e809";
+}
+.icon-cancel:before {
+  content: "\e80a";
+}
+.icon-dot:before {
+  content: "\e80b";
+}
+.icon-dot-3:before {
+  content: "\e80c";
+}
+.icon-down-dir:before {
+  content: "\e80d";
+}
+.icon-left-open-big:before {
+  content: "\e80e";
+}
+.icon-cog:before {
+  content: "\e80f";
+}
+.icon-search:before {
+  content: "\e810";
+}
+.icon-up-dir:before {
+  content: "\e811";
+}
+.icon-down-open-big:before {
+  content: "\e812";
+}
+.icon-up-open-big:before {
+  content: "\e813";
+}
+.icon-right-dir-outlines:before {
+  content: "\e814";
+}
+.icon-brightness:before {
+  content: "\e815";
+}
+.icon-down-dir-outlines:before {
+  content: "\e816";
+}
+.icon-expand:before {
+  content: "\e817";
+}
+.icon-zoom-in:before {
+  content: "\e818";
+}
+.icon-zoom-out:before {
+  content: "\e819";
+}
+.icon-rotate-cw:before {
+  content: "\e81a";
+}
+.icon-highlight-color:before {
+  content: "\e81b";
+}
+.icon-file:before {
+  content: "\e81c";
+}
+.icon-files:before {
+  content: "\e81d";
+}
+.icon-blur:before {
+  content: "\e81e";
+}
+.icon-table-delete-column:before {
+  content: "\e81f";
+}
+.icon-arrow-right:before {
+  content: "\e820";
+}
+.icon-color_saturation:before {
+  content: "\e821";
+}
+.icon-contrast:before {
+  content: "\e822";
+}
+.icon-crop-rotate:before {
+  content: "\e823";
+}
+.icon-crop:before {
+  content: "\e824";
+}
+.icon-filters-1:before {
+  content: "\e825";
+}
+.icon-flip-horizontal:before {
+  content: "\e826";
+}
+.icon-flip-vertical:before {
+  content: "\e827";
+}
+.icon-hue:before {
+  content: "\e828";
+}
+.icon-resize:before {
+  content: "\e829";
+}
+.icon-table-add-column-after:before {
+  content: "\e82a";
+}
+.icon-sharpen:before {
+  content: "\e82b";
+}
+.icon-brightness-contrast:before {
+  content: "\e82c";
+}
+.icon-undo-1:before {
+  content: "\e82d";
+}
+.icon-redo:before {
+  content: "\e82e";
+}
+.icon-crop-rotate2:before {
+  content: "\e82f";
+}
+.icon-check-2:before {
+  content: "\e830";
+}
+.icon-arrow-left:before {
+  content: "\e831";
+}
+.icon-image:before {
+  content: "\e832";
+}
+.icon-view-code:before {
+  content: "\e833";
+}
+.icon-clear-formatting:before {
+  content: "\e834";
+}
+.icon-list-ordered:before {
+  content: "\e835";
+}
+.icon-list-unordered:before {
+  content: "\e836";
+}
+.icon-indent-decrease:before {
+  content: "\e837";
+}
+.icon-indent-increase:before {
+  content: "\e838";
+}
+.icon-align-right:before {
+  content: "\e839";
+}
+.icon-align-center:before {
+  content: "\e83a";
+}
+.icon-align-left:before {
+  content: "\e83b";
+}
+.icon-rotate-ccw:before {
+  content: "\e83c";
+}
+.icon-underlined:before {
+  content: "\e83d";
+}
+.icon-italic:before {
+  content: "\e83e";
+}
+.icon-bold:before {
+  content: "\e83f";
+}
+.icon-font-size:before {
+  content: "\e840";
+}
+.icon-font-family:before {
+  content: "\e841";
+}
+.icon-hyperlink:before {
+  content: "\e842";
+}
+.icon-table:before {
+  content: "\e843";
+}
+.icon-strike:before {
+  content: "\e844";
+}
+.icon-link-external:before {
+  content: "\e845";
+}
+.icon-hyperlink-remove:before {
+  content: "\e846";
+}
+.icon-sup-script:before {
+  content: "\e847";
+}
+.icon-sub-script:before {
+  content: "\e848";
+}
+.icon-align-justify:before {
+  content: "\e849";
+}
+.icon-table-split-cells-vertically:before {
+  content: "\e84a";
+}
+.icon-table-split-cells-horizontally:before {
+  content: "\e84b";
+}
+.icon-table-merge-cells-vertically:before {
+  content: "\e84c";
+}
+.icon-table-merge-cells-horizontally:before {
+  content: "\e84d";
+}
+.icon-cancel-android:before {
+  content: "\e84e";
+}
+.icon-table-delete-row:before {
+  content: "\e84f";
+}
+.icon-table-delete:before {
+  content: "\e850";
+}
+.icon-cancel2:before {
+  content: "\e851";
+}
+.icon-table-add-column-before:before {
+  content: "\e852";
+}
+.icon-table-add-row-after:before {
+  content: "\e853";
+}
+.icon-table-add-row-before:before {
+  content: "\e854";
+}
+.icon-table-add:before {
+  content: "\e855";
+}
+.icon-font-style:before {
+  content: "\e859";
+}

styling-and-appearance/telerik-font-icons.md

@@ -6,6 +6,8 @@ slug: telerik-font-icons
 position: 2
 ---
 
+<link rel="stylesheet" href="style.css" />
+
 # Telerik UI for Xamarin Font Icons
 
 Telerik font icons is a collection of small vector graphics used across the components from Telerik UI for Xamarin suite. Examples of using font icons include the expand and collapse indicators of Accordion, Expander and TreeView controls, filter and sort indicators of DataGrid control, and other.
@@ -19,28 +21,28 @@ This article will give an overview on how you can utilize the Telerik font icons
 
 ## Include the required Telerik Font file
 
-The Telerik Font Icons are located in the telerikfontexamples.ttf file. There are two options you could use to get the **.ttf** file.
+1. The Telerik Font Icons are located in the telerikfontexamples.ttf file. There are two options you could use to get the **.ttf** file.
 
-* Download the **telerikfontexamples.ttf** file from [here](https://github.com/telerik/telerik-xamarin-forms-samples/blob/master/QSF/QSF.Android/Assets/Fonts/telerikfontexamples.ttf).
+	* Download the **telerikfontexamples.ttf** file from [Telerik UI for Xamarin Samples App GitHub repo](https://github.com/telerik/telerik-xamarin-forms-samples/blob/master/QSF/QSF.Android/Assets/Fonts/telerikfontexamples.ttf).
 
-* Get the font file from the installation folder of Telerik UI for Xamarin: The default location of the **telerikfontexamples.ttf** file is *C:\Program Files (x86)\Progress\Telerik UI for Xamarin [version]\QSF\QSF.Android\Assets\Fonts*
+	* Get the font file from the installation folder of Telerik UI for Xamarin - here is the path to the exact location: *Telerik UI for Xamarin [version]\QSF\QSF.Android\Assets\Fonts*
 
-Include Telerik Font **.ttf** file into your application in the following locations:
+2. Include Telerik Font **.ttf** file into your application in the following locations:
 
-* Android project: Create **Fonts** folder inside the Android **Assets** and add the **.ttf** file there. 
+	* Android project: Create **Fonts** folder inside the Android **Assets** and add the **.ttf** file there. 
 
-* iOS project: Create **Fonts** folder inside the iOS **Resources** and add the **.ttf** file there.
+	* iOS project: Create **Fonts** folder inside the iOS **Resources** and add the **.ttf** file there.
 
-You'd also need to modify the info.plist file inside the iOS project with adding the following code:
+	You'd also need to modify the info.plist file inside the iOS project with adding the following code:
 
-```xml
+	```xml
-<key>UIAppFonts</key>
+	<key>UIAppFonts</key>
-  <array>
+	  <array>
-    <string>Fonts/telerikfontexamples.ttf</string>
+		<string>Fonts/telerikfontexamples.ttf</string>
-  </array>
+	  </array>
-```
+	```
 
-* UWP project: Create **Fonts** folder inside the UWP **Assets** and add the **.ttf** file there.
+	* UWP project: Create **Fonts** folder inside the UWP **Assets** and add the **.ttf** file there.
 
 
 ## Add the font file path
@@ -49,9 +51,7 @@ As a final step you need to add the path to the Fonts inside the Resources of th
 
 ```XAML
 <Application.Resources>
-        <ResourceDictionary>
+        <ResourceDictionary>          
-            <x:String x:Key="icon's name">icon's code;</x:String>
-
             <OnPlatform x:TypeArguments="x:String" x:Key="IconsFont">
                 <On Platform="iOS">telerikfontexamples</On>
                 <On Platform="Android">Fonts/telerikfontexamples.ttf#telerikfontexamples</On>
@@ -65,31 +65,59 @@ As a final step you need to add the path to the Fonts inside the Resources of th
 
 You can choose any of the available Telerik Font icons: 
 
-![Telerik Font Icons](images/telerik-font-icons.png)
+| Telerik Font Icons |  |  | | | | 
+|--------------------|----------------|------------|---------------------|-------------------|----------------|
+| <span class="icon-badge-available"></span> badge-available |  __\&#xe85b;__ | <span class="icon-badge-away"></span> badge-away | __\&#xe85c;__ | <span class="icon-badge-busy"></span> badge-busy | __\&#xe85a;__ |
+| <span class="icon-badge-add"></span> badge-add | __\&#xe857;__ | <span class="icon-badge-delete"></span> badge-delete| __\&#xe858;__ | <span class="icon-badge-NA"></span> badge-NA | __\&#xe856;__ |
+| <span class="icon-badge-ooo"></span> badge-ooo | __\&#xe85d;__ | <span class="icon-sort_descent"></span> sort_descent | __\&#xe800;__ | <span class="icon-spinner2"></span> spinner | __\&#xe801;__ |
+| <span class="icon-filter"></span> filter | __\&#xe802;__ | <span class="icon-sort_ascent"></span> sort_ascent |  __\&#xe803;__ | <span class="icon-group"></span> group |  __\&#xe804;__ |
+| <span class="icon-right-open-big"></span> right-open | __\&#xe805;__ | <span class="icon-right-dir"></span> right-dir |  __\&#xe806;__ | <span class="icon-dots_vert"></span> dots-vertical |  __\&#xe807;__ |
+| <span class="icon-menu"></span> menu | __\&#xe808;__ | <span class="icon-check"></span> check |  __\&#xe809;__ | <span class="icon-cancel"></span> cancel |  __\&#xe80a;__ |
+| <span class="icon-dot"></span> dot | __\&#xe80b;__ | <span class="icon-dot-3"></span> dots-horizontal |  __\&#xe80c;__ | <span class="icon-down-dir"></span> down-dir |  __\&#xe80d;__ |
+| <span class="icon-left-open-big"></span> left-open | __\&#xe80e;__ | <span class="icon-cog"></span> configure |  __\&#xe80f;__ | <span class="icon-search"></span> search |  __\&#xe810;__ |
+| <span class="icon-up-dir"></span> up-dir | __\&#xe811;__ | <span class="icon-down-open-big"></span> down-open |  __\&#xe812;__ | <span class="icon-up-open-big"></span> up-open |  __\&#xe813;__ |
+| <span class="icon-right-dir-outlines"></span> right-dir-outlines | __\&#xe814;__ | <span class="icon-brightness"></span> brightness |  __\&#xe815;__ | <span class="icon-down-dir-outlines "></span> down-dir-outlines  |  __\&#xe816;__ |
+| <span class="icon-expand"></span> expand | __\&#xe817;__ | <span class="icon-zoom-in"></span> zoom-in |  __\&#xe817;__ | <span class="icon-zoom-out"></span> zoom-out |  __\&#xe818;__ |
+| <span class="icon-rotate-cw"></span> rotate | __\&#xe81a;__ | <span class="icon-highlight-color"></span> highlight-color |  __\&#xe81b;__ | <span class="icon-file"></span> file |  __\&#xe81c;__ |
+| <span class="icon-files"></span> files | __\&#xe81d;__ | <span class="icon-blur"></span> blur |  __\&#xe81e;__ | <span class="icon-table-delete-column"></span> table-delete-column |  __\&#xe81f;__ |
+| <span class="icon-arrow-right"></span> arrow-right | __\&#xe820;__ | <span class="icon-color_saturation"></span> color_saturation |  __\&#xe821;__ | <span class="icon-contrast"></span> contrast |  __\&#xe822;__ |
+| <span class="icon-crop-rotate"></span> crop-rotate | __\&#xe823;__ | <span class="icon-crop"></span> crop |  __\&#xe824;__ | <span class="icon-filters-1"></span> filters |  __\&#xe825;__ |
+| <span class="icon-flip-horizontal"></span> flip-horizontal | __\&#xe826;__ | <span class="icon-flip-vertical"></span> flip-vertical |  __\&#xe827;__ | <span class="icon-hue"></span> hue |  __\&#xe828;__ |
+| <span class="icon-resize"></span> resize | __\&#xe829;__ | <span class="icon-table-add-column-after"></span> table-add-column |  __\&#xe82a;__ | <span class="icon-sharpen"></span> sharpen |  __\&#xe82b;__ |
+| <span class="icon-brightness-contrast"></span> brightness-contrast | __\&#xe82c;__ | <span class="icon-undo-1"></span> undo |  __\&#xe82d;__ | <span class="icon-redo"></span> redo |  __\&#xe82e;__ |
+| <span class="icon-crop-rotate"></span> crop-rotate | __\&#xe82f;__ | <span class="icon-check-2"></span> check |  __\&#xe830;__ | <span class="icon-arrow-left"></span> arrow-left |  __\&#xe831;__ |
+| <span class="icon-image"></span> image | __\&#xe832;__ | <span class="icon-view-code"></span> view-code |  __\&#xe833;__ | <span class="icon-clear-formatting"></span> clear-formatting |  __\&#xe834;__ |
+| <span class="icon-list-ordered"></span> list-ordered | __\&#xe835;__ | <span class="icon-list-unordered"></span> list-unordered |  __\&#xe836;__ | <span class="icon-indent-decrease"></span> indent-decrease |  __\&#xe837;__ |
+| <span class="icon-indent-increase"></span> indent-increase | __\&#xe838;__ | <span class="icon-align-right"></span> align-right |  __\&#xe839;__ | <span class="icon-align-center"></span> align-center |  __\&#xe83a;__ |
+| <span class="icon-align-left"></span> align-left | __\&#xe83b;__ | <span class="icon-rotate-ccw"></span> rotate |  __\&#xe83c;__ | <span class="icon-underlined"></span> underlined |  __\&#xe83d;__ |
+| <span class="icon-italic"></span> italic | __\&#xe83e;__ | <span class="icon-bold"></span> bold |  __\&#xe83f;__ | <span class="icon-font-size"></span> font-size |  __\&#xe840;__ |		
+| <span class="icon-font-family"></span> font-family | __\&#xe841;__ | <span class="icon-hyperlink"></span> hyperlink |  __\&#xe842;__ | <span class="icon-table"></span> table |  __\&#xe843;__ |	
+| <span class="icon-strike"></span> strike | __\&#xe844;__ | <span class="icon-link-external"></span> link-external |  __\&#xe845;__ | <span class="icon-hyperlink-remove"></span> hyperlink-remove |  __\&#xe846;__ |
+| <span class="icon-sup-script"></span> sup-script | __\&#xe847;__ | <span class="icon-sub-script"></span> sub-script |  __\&#xe848;__ | <span class="icon-align-justify"></span> align-justify |  __\&#xe849;__ |
+| <span class="icon-table-split-cells-vertically"></span> table-split-cells-vertically | __\&#xe84a;__ | <span class="icon-table-split-cells-horizontally"></span> table-split-cells-horizontally |  __\&#xe84b;__ | <span class="icon-table-merge-cells-vertically"></span> table-merge-cells-vertically |  __\&#xe84c;__ |
+| <span class="icon-table-merge-cells-horizontally"></span> table-merge-cells-horizontally | __\&#xe84d;__ | <span class="icon-cancel-android"></span> cancel-android |  __\&#xe84e;__ | <span class="icon-table-delete-row"></span> table-delete-row |  __\&#xe84f;__ |
+| <span class="icon-table-delete"></span> table-delete | __\&#xe850;__ | <span class="icon-cancel2"></span> cancel |  __\&#xe851;__ | <span class="icon-table-add-column-before"></span> table-add-column-before |  __\&#xe852;__ |
+| <span class="icon-table-add-row-after"></span> table-add-row-after | __\&#xe853;__ | <span class="icon-table-add-row-before"></span> table-add-row-before |  __\&#xe854;__ | <span class="icon-table-add"></span> table-add | __\&#xe855;__ | 
+|<span class="icon-font-style"></span> cancel |  __\&#xe859;__ | | |
 
 >important You need to set the Telerik Font icon code on the concrete property to visualize the icon. 
 
-The icon's code is:
+## Examples
 
-![Telerik Font Icons Code](images/telerik-font-icons-codes.png)
+Let's for example change the default icon of the RadDataGrid OptionsButton, used to display the [DataGrid Filtering UI]({%slug datagrid-filtering-overview%}#filtering-ui) with one of the above listed icons (configure icon). DataGrid provides `HeaderStyle` property for its columns and the `DataGridColumnHeaderStyle` exposes OptionsButtonText property responsible for the OptionsButton icon. 
 
-## Example
+The configure icon's code ends with **e80f;** so this string should be applied to the `OptionsButtonText` property:
-
-If you want to change the default icon of the RadDataGrid OptionsButton with one of the following icons above, set the icon code to the OptionsButtonText property:
-
-The gear icon's code is: **0xe80f** and the final code result that should be set to the OptionsButtonText property is **&amp;#xE80F;**
-
-You have to 
-* replace the **0x** with **&#x** 
-* capitalize all the letters
-* put a semicolon at the end of the string
 
 ```XAML
 <telerikGrid:DataGridTextColumn.HeaderStyle>
-    <telerikGrid:DataGridColumnHeaderStyle OptionsButtonText="&#xE80F;"/>
+	<telerikGrid:DataGridColumnHeaderStyle OptionsButtonText="&#xe80f;"/>
 </telerikGrid:DataGridTextColumn.HeaderStyle>
 ```
 
+Here is the result:
+
+![](images/telerik-font-icons-grid.png)
+
 ## See Also
 
 * [How To Set a Theme]({%slug common-setting-a-theme%})