活动按钮的图像类型 [英] Image Types for Active Buttons

问题描述

工具栏按钮的推荐图像类型是什么?当关联的面板处于活动状态时，我希望工具栏按钮的颜色变为活动"颜色.类似于模型浏览器"按钮的工作方式.我尝试了png和svg都没有成功，如下图所示:

的SVG按钮

解决方案

查看器工具栏"图标的其他信息由自定义字体格式制成-

在为Web应用程序创建图标之前，您必须将其转换为SVG格式，然后使用某些工具，例如字形， IcoMoon 等将图标转换为WOFF格式.然后，为显示的图标创建CSS样式，如上所示.为了简化工作流程，我个人更喜欢使用 IcoMoon 创建自己的图标，它将创建所有必需的文件(例如WOFF，CSS等)，同时点击生成字体".

希望有帮助〜

What is the recommend image type for a toolbar button? I would like to have the toolbar button color change to the 'active' color when the associated panel is active. Similar to how the Model Browser button works. I've tried png and svg without success as can be seen in the image below:

解决方案

Additional information to the Viewer Toolbar icons, they are made from a custom font format - WOFF(Web Open Font Format) with my finding and just like the Font Awesome and Bootstrap Glyphicons. You can see some configs like below in the style.css

@font-face {
  font-family: 'forge-viewer-font';
  src: url('data:application/font-woff;base64string...') format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^="adsk-icon-"]:before,
[class*=" adsk-icon-"]:before {
  font-family: "forge-viewer-font" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  // .... other configs
}

.adsk-icon-arrow:before {
    content: "a";
}

The A character stands for the arrow icon of the viewer dolly tool:

Before creating the icons for web applications, you have to covert them into SVG format, then use some tools such as Glyphs, IcoMoon, and etc. to convert icons into WOFF format. Afterward, create CSS styles for icon configs showing as the above. To simplify the workflow, I personally prefer to use the IcoMoon to create my own icons, it will create all required files (e.g. WOFF, CSS, ..., and so on) automatically while clicking "Generate Fonts".

Hope it helps~

这篇关于活动按钮的图像类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！