如何增加dijit工具欄圖標大小？

Question

在dijit工具欄中默認圖標大小是16x16 px 我想製作一個大小爲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

默認圖標只有16像素（其中高度在CSS中18像素），如果你要使用更大的圖標，那麼你將有用這些更大的圖標在CSS中創建自定義圖標類。

例如：

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

然後你就可以使用它作爲你的iconClass在data-dojo-props。工具欄將自動適應這個新的高度。我也更新了您的JSFiddle。在這個例子中我使用了顏色，但你也可以使用圖標。