内置的图标

Blazor套件的UI带有一组字体图标，您可以在Button组件中或作为一个独立组件在不同的地方使用。

在本文中:

• 独立图标组件
• 图标参数-优先顺序
• 图标在Telerik组件
• 图标调整
• 图标列表

独立图标组件

Telerik UI为Blazor附带TelerikIcon组件，可用于呈现图标。它适用于以下图像类型:

• Telerik字体图标-你可以找到渲染的图标和他们的名字图标列表下面的部分。使用这些名称作为普通字符串。

• 第三方字体图标- - -IconClass参数允许您设置一个CSS类，该类提供所需的字体名称、字体大小和内容::之前pseudoelement。

• 光栅图像- - -ImageUrl是指向图像的字符串-它可以是相对于wwwroot文件夹，或者一个绝对的URL。

• 光栅图像精灵- - -SpriteClass参数允许您从站点的样式表中提供类，为您的精灵生成所需的外观和背景位置。

 @*将呈现来自openicon的音频注释图标*@  @*主页图标，假设您已经在页面上加载了字体，您可以使用您自己的CSS类和字体图标字体*@  @*通过URL呈现一个实际的标签*@

图标参数-优先顺序

如果定义了多个Icon属性，则其优先级顺序为:

1. ImageUrl
2. 图标
3. IconClass
4. SpriteClass

此顺序适用于公开相同参数的其他组件，如TelerikButton或网格命令按钮。

图标在Telerik组件

一些Telerik组件公开了开箱即用的图标功能。这些参数与TelerikIcon上面描述的组件。

我显示过滤器图标

图标调整

本节展示了一些调整字体图标的例子:

• 大小
• 颜色
• 剑道的图标

大小

您可以更改字体大小的图标元素来改变图标的大小。

我们的字体图标设计在一个16px网格基础上。要实现像素完美的图标显示，请保持16个单位的尺寸(32、48、64等等)来进行放大。

@*第一个图标通过CSS增大，第二个图标有默认大小*@  
 较大图标
 正常图标

颜色

您可以更改颜色更改图标元素的默认黑色的CSS规则。

@*第一个图标通过CSS变成红色，第二个图标有默认颜色*@  
< TelerikIcon Icon="filter">红色图标
 正常图标

剑道的图标

用于Blazor套件的Telerik UI也具有同样的功能主题与Progress制作的其他几个组件套件(如剑道UI和ASP。网络核心)。这意味着在所有这些套件中都可以使用相同的字体图标，并作为样式表中的特性，因此可以直接将图标与它们设计用于的规则和HTML呈现一起使用，而无需使用诸如< TelerikIcon >．

使用这种直接的HTML可以让你更容易定制和样式你在自己的布局中使用的图标-它允许你直接添加额外的CSS类到它们的呈现，而不通过父元素级联。

若要直接使用图标，请查看剑道UI Web字体图标库篇文章。它显示了你需要的所有信息。的< TelerikIcon >组件和其他内置图标在UI为Blazor只需删除k-i -前缀，让你更方便。

@ *剑道的直接使用UI字体图标* @ <跨类=“k-icon k-i-check " > < / span > @ *剑道的直接使用图标你可以添加更多的类直接* @ <跨类=“k-icon k-i-check k-flip-h k-flip-v " > < / span > @ *相同的图标可以通过Blazor组件呈现但样式需要一个父级联通过* @ < TelerikIcon图标= "检查" > < / TelerikIcon > @ *您可以添加更多的类使用剑道图标直接通过IconClass参数考虑实例化一个@ 

图标列表

本节列出了与用于Blazor主题的Telerik UI一起提供的可用字体图标。

每个图标都带有它的名称，您可以在Telerik Blazor组件中使用图标参数可用。

例如，TelerikIcon组件和TelerikButton组件可以采用内置图标名称:

 
 插入-tr .

另请参阅

• Blazor现场演示
• 剑道UI Web字体图标库