DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。在本文中我们将为大家介绍如何使用DevExtreme组件来自定义图标。DevExpress新旧版本帮助文档下载可进QQ qun获取169725316自定义图标由于​​​​​​​DevExtreme图标是作为图标字体发布的因此可以使用与自定义文本内容相同的CSS属性对它们进行自定义颜色、字体大小、字体粗细、文本对其等这对于UI组件中使用的图标是正确的...jQueryHTMLdiv idsaveButton/divJavaSciprt$(function() { $(#saveButton).dxButton({ icon: save, text: Save }); });CSS#saveButton .dx-icon { font-size: 24px; color: blue; }ASP.NET MVC Controls. 以及用于任何其他HTML元素的图标HTMLi classdx-icon-email dx-icon-custom-style/iCSS.dx-icon-custom-style { font-size: 24px; color: blue; }dx-icon是一个CSS类当DevExtreme UI组件将图标元素呈现到DOM中时添加到图标元素中。开发人员不能用另一个名字来称呼它然而对于其他HTML元素中的图标则不是这样的在本例中可以为类使用任何名称如前一个示例所示。自定义图像作为图标UI组件的icon属性接受URL因此开发人员可以将图像的URL分配给它但是最好用Base64类型来编码图像以减少传输的数据量可以在网上搜索一个图像到Base64的转换器。虽然Base64代码可以直接分配给icon属性但我们建议将它放在CSS中因为它的长度。将以下CSS规则添加到样式表中CSS.dx-icon-customicon { // in Angular apps, add ::ng-deep before background-image: url(data:image/png;base64,... LONG BASE64 CODE IS HERE ...); background-repeat: no-repeat; background-position: 0px 0px; }customicon这里是图标的名称应该分配给UI组件的icon属性。此外开发人员还可以为UI组件元素的不同状态提供特定的图标变体在下面的代码中为选定的选项卡提供了一个特殊的图标CSS.dx-tab-selected .dx-icon-customicon { background-image: url(data:image/png;base64,... LONG BASE64 CODE GOES HERE ...); background-repeat: no-repeat; background-position: 0px 0px; }从前面的示例中选择的类(如dx-tab-selected)没有记录检查CSS规则找出哪些类被添加到正在定制的UI组件元素中。外部图标库UI组件中的图标作为i元素插入到DOM中当开发人员设置一个UI组件的icon属性时它的值被用来形成i元素的class属性例如下面的代码…icon: home... 渲染到DOM如下所示HTMLi classdx-icon dx-icon-home/i这允许​​​​​​​DevExtreme UI组件支持来自外部图标库的图标前提是它们也应该在class属性中指定。Font Awesome、Glyphicons和Ionicons就是这样的库的例子按照你想要使用的库的安装教程按如下方式设置图标属性jQueryJavaScript$(function() { $(#homeButton).dxButton({ icon: fas fa-home // Font Awesome 5 icon: fa fa-home // Font Awesome 4 icon: glyphicon glyphicon-home // Glyphicons icon: icon ion-md-home // Ionicons }); });ASP.NET MVC ControlsRazor C#(Html.DevExtreme().Button() .Icon(fas fa-home) // Font Awesome 5 .Icon(fa fa-home) // Font Awesome 4 .Icon(glyphicon glyphicon-home) // Glyphicons .Icon(icon ion-md-home) // Ionicons )SVG图标除了字体图标外​​​​​​​DevExtreme还以SVG格式提供了相同的图标开发人员可以再GitHub上的DevExtreme存储库中找到SVG图标。下面的代码使用了Button UI组件中的SVG图标同样的技术可以用于任何其他具有icon属性的UI组件。1. 使用图标的URLJavaScriptnew DevExpress.ui.dxButton(targetElement, { icon: https://path/to/the/icon.svg });2. 插入SVG内容inline:JavaScriptnew DevExpress.ui.dxButton(targetElement, { icon: svgSVG_CONTENT/svg });3. 导入图标JavaScriptimport * as myIcon from ./assets/icon.svg; new DevExpress.ui.dxButton(targetElement, { icon: myIcon });重要提示SVG格式允许运行可能是恶意的可执行代码我们强烈建议您只使用可信来源的SVG图标。