QToolButton设置图标位置

设置QToolButton图标位置

QToolButton通过left，top等方式设置的图标，紧靠按钮边缘，视觉效果并不好。
通过网上查找资料和摸索，得出了可行的一种方式，设置按钮的margin和padding；
修改了图标的显示位置，可以设置到想要的位置。

我使用的图标尺寸在20*20以内。
按钮上有4个文字，加上图标，我设置的按钮宽度是105px；

设置图标处于左侧位置向右移动一段距离

使用默认图标靠左方式设置图标

background:url(:/image/image/icon.png) left no-repeat;

效果图：

图标太靠左，看着视觉效果并不是太好。

通过设置margin-left和padding-left，并设置图片为居中对齐的方式，能达到下图效果。

background:url(:/image/image/icon.png) center no-repeat;

我的按钮宽度105px，设置margin-left:-75px;即把图标从中间位置向左拉了75px的位置。
再设置文字位置，padding-left:85px; 即文字从图标的右边10px位置开始显示。

大家可以这样设定： margin-left = -(按钮width-30)px，padding-left: (按钮width-20)px。

#toolButton {
margin-left:-75px;
padding-left:85px;
background:url(:/image/image/icon.png) center no-repeat;
font-size: 14px;
border: none;
}

实现效果：

设置图标处于中间位置文字向下移动一段距离

#toolButton{
min-width:55px;
min-height:45px;
border:none;
padding-top:50px;
margin-top:-25px;
margin-left:25px;
background:url(:/image/image/icon.png) center no-repeat;
}

运行结果：

小遗憾

有个小遗憾就是这样不能设置border-radius，因为margin推出去的部分，并不在border的范围内，设置border-radius也不会变成圆角。
如果有知道其他方法的伙伴也可以给我评论，互相交流。