Telerik
/
xamarin-forms-docs
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Updated Telerik Fonts topic

This commit is contained in:
PROGRESS\kerpecheva 2021-08-05 17:28:15 +03:00
Родитель 7ec395dfd1
Коммит d0b10d8f4e
9 изменённых файлов: 473 добавлений и 31 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

Двоичные данные
fonts/telerikfont.eot Normal file
Просмотреть файл

Двоичный файл не отображается.

104
fonts/telerikfont.svg Normal file
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 99 KiB

Двоичные данные
fonts/telerikfont.ttf Normal file
Просмотреть файл

Двоичный файл не отображается.

Двоичные данные
fonts/telerikfont.woff Normal file
Просмотреть файл

Двоичный файл не отображается.

Двоичные данные
styling-and-appearance/images/telerik-font-icons-codes.png
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 36 KiB

Двоичные данные
styling-and-appearance/images/telerik-font-icons-grid.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 57 KiB

Двоичные данные
styling-and-appearance/images/telerik-font-icons.png
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 54 KiB

310
styling-and-appearance/style.css Normal file
Просмотреть файл

@ -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";
}

90
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
<key>UIAppFonts</key>
<array>
<string>Fonts/telerikfontexamples.ttf</string>
</array>
```
```xml
<key>UIAppFonts</key>
<array>
<string>Fonts/telerikfontexamples.ttf</string>
</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>
<x:String x:Key="icon's name">icon's code;</x:String>
<ResourceDictionary>
<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
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
The configure icon's code ends with **e80f;** so this string should be applied to the `OptionsButtonText` property:
```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%})