How can I make other buttons like as answer and comment button in SnowFlat?

Question

Answer and Comment Button: 

Other Buttons:

As you see above, answer and comment button shows icon and button name both. But others show only icons. I want to make these buttons like as answer and comment button. How can I do that? 

Theme: SnowFlat

Answer 1

To set the icon with button text/label, you need to set an icon as a background image. Something as in below. Set and position the background image to their respective class.

.qa-form-light-button-answer {
    ...
    background-image: url('images/icons/answer-white.png');
    ...
}

Comments

Sorry, I don’t understand. I checked every button class but every class already have a background-image.

*****

.qa-form-light-button-edit, .qa-form-light-button-retagcat {
    background-image: url('images/icons/edit-white.png');
}
.qa-form-light-button-flag {
    background-image: url('images/icons/flag-white.png');
}
.qa-form-light-button-unflag {
    background-color: #812b2b;
    background-image: url('images/icons/flag-white.png');
}
.qa-form-light-button-clearflags {
    background-image: url('images/icons/un-flag-white.png');
}
.qa-form-light-button-hide {
    background-image: url('images/icons/hide-white.png');
}
.qa-form-light-button-follow {
    background-image: url('images/icons/link-white.png');
}
.qa-form-light-button-reshow {
    background-image: url('images/icons/show-white.png');
}
.qa-form-light-button-claim {
    background-image: url('images/icons/claim-white.png');
}
.qa-form-light-button-delete {
    background-image: url('images/icons/delete-white.png');
}
.qa-form-light-button-approve {
    background-image: url('images/icons/approve-white.png');
    padding-left: 18px;
}
.qa-form-light-button-reject {
    background-image: url('images/icons/rejected-white.png');
}
.qa-form-light-button-close {
    background-image: url('images/icons/close-white.png');
}
.qa-form-light-button-reopen {
    background-image: url('images/icons/open-white.png');
}
.qa-form-light-button-block {
    background-image: url('images/icons/rejected-white.png');
}
.qa-form-light-button-reply {
    background-image: url('images/icons/reply-white.png');
}

*****

---

Please post your website URL here or PM me if you can't post here.

---

I sent the URL in your PM. Please check...

---

I apologize for the confusion earlier. I now understand that you want to add labels to other action buttons like a Flag. This can be achieved easily by setting the text-indent to 0 (zero) or removing it from each button class and adjusting other spacing properties such as width, margin, and padding to align the text correctly. Here is an example of how it can be done:

width: auto;
padding: 0 10px 0 30px;
background-position: 8px center;
font-size: 13px;
line-height: 32px;
text-indent: 0;

---

Thanks a lot. It works... ❤️