Question

在dijit工具栏中，默认图标大小为16x16像素我想制作一个带有尺寸为20x20（或更大的图标）的工具栏，以便用户更舒服。

我已经创建了新图标并将它们添加到CSS中，但我不确定如何重新调整工具栏本身以显示20x20图标。

以下是我今天如何创建工具栏的示例： http://jsfiddle.net/D4BVT/

 <div id="toolbar1" data-dojo-type="dijit/Toolbar" style="background-color:inherit;background-image:none;border-bottom:0px;">
            <div data-dojo-type="dijit/form/Button" id="toolbar1.cut" data-dojo-props="iconClass:'PanIcon', showLabel:false">Cut</div>
            <div data-dojo-type="dijit/form/Button" id="toolbar1.copy" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy', showLabel:false">Copy</div>
            <div data-dojo-type="dijit/form/Button" id="toolbar1.paste" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste', showLabel:false">Paste</div>
            <!-- The following adds a line between toolbar sections-->
            <span data-dojo-type="dijit/ToolbarSeparator"></span>
            <div data-dojo-type="dijit/form/ToggleButton" id="toolbar1.bold" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconBold', showLabel:false">Bold</div>
        </div>

Answer 1

默认图标只有16px（CSS的高度为18px），如果你想使用更大的图标，那么你必须使用这些更大的图标在CSS中创建自定义图标类。

例如：

.customCutIcon {
    background-image: url("http://url.to/your/cut-icon.png");
    width: 32px;
    height: 32px;
}

然后您可以将其用作iconClass中的data-dojo-props。工具栏将自动适应这个新高度。我还更新了您的JSFiddle。我在这个例子中使用了颜色，但你也可以使用图标。

如何增加dijit工具栏图标大小？

1 个答案: