[Qt] Use Qss to set the position of QPushButton icon and display text

Use Qss to set the position of QPushButton icon and display text

1. Background

In development, buttons are often used as an input component. However, buttons often have different development and design requirements. This article focuses on sharing: how to use Qss to set the button icon and button text position, so as to achieve the expected development Effect.

【Effect】
Please add a picture description

insert image description here

Two, Css style sheet

(2-1) Commonly used QPushButton style sheet templates

QPushButton{
    
    
    background-color: #2786ba;				/* 背景颜色 */
    border-radius:5px;					    /* 按钮边框的圆角设置 */
    
    /* 按钮背景图标设置 */
    background-image: url(:/configIcon.png);  /* 背景图片 */
    background-origin: content;
    background-position: center;			/* 背景图片的位置 */
    padding-right: 40px;				    /* 背景图标的padding参数 */
    padding-bottom: 2px;					/* 背景图标的padding参数 */
    background-repeat: no-repeat;			/* 设置背景图像的平铺模式 */

    /* 按钮文本设置 */
    text-align: top;						/* 文本的位置 */
    padding-left: 2px;						/* 文本的padding参数 */		
    padding-top: 2px;
    font-size: 12px;
    color: #FFFFFF;							/* 文本颜色 */
}

background-originProperty reference Url: https://www.runoob.com/cssref/css3-pr-background-origin.html

(2-2) Icon on top/text on bottom

QPushButton#pushButton
{
    
    
    background-image: url(:/configIcon.png);
    background-origin: content;
    background-position: top;
    padding-top: 0px;
    background-repeat: no-repeat;

    text-align: bottom;
    padding-bottom:-50px;
    font-size: 12px;
    color: #FFFFFF;
}

(2-3) icon below / text above

QPushButton#pushButton_2
{
    
    
    background-image: url(:/configIcon.png);
    background-origin: content;
    background-position: bottom;
    background-repeat: no-repeat;

    text-align: top;
    padding-top:5px;

    font-size: 12px;
    color: #FFFFFF;
}

(2-4) Icon on the left / Text on the right

QPushButton#pushButton_3
{
    
    
    background-image: url(:/configIcon.png);
    background-origin: content;
    background-position: left;
    background-repeat: no-repeat;

    text-align: right;
    padding-right:5px;

    font-size: 12px;
    color: #FFFFFF;
}

(2-5) icon on right/text on left

QPushButton#pushButton_4
{
    
    
    background-image: url(:/configIcon.png);
    background-origin: content;
    background-position: right;
    background-repeat: no-repeat;

    text-align: left;
    padding-left:5px;

    font-size: 12px;
    color: #FFFFFF;
}

3. Special instructions

1. There are two Css properties that are particularly important when setting the icon and text position of QPushButtom:

1、background-position  -----  设置图标的位置
2、text-align-------------设置文本的位置

2. Then use the Padding box model to set the position:

padding-left
padding-bottom
padding-top
padding-right

paddingAttribute reference Url: https://www.w3school.com.cn/cssref/pr_padding.asp
Note: The above four padding parameters must be set properly in order to adjust the position of the icon and text.

Your praise and attention are the driving force for my continuous creation.

Search and follow [Embedded Xiaosheng] wx public account to reply to the keyword [1005] to get the source code project of this article, and to get more exciting content.
Please add a picture description