How to add text beside the buttons which under the questions in snowflat theme

Question

I want to add text beside the buttons to introduce the icons to the visitors, how I can add that ?

 

 

Answer 1

You need to change CSS a bit. Probably you are using RTL. If so than make below changes in RTL css file else LTR CSS

Find below class and make changes

.qa-form-light-button-flag{
    ...
    background-position: 10px center;
}

.qa-form-light-button {
    background: #2c3e50 none no-repeat scroll center center;
    border: 0 none;
    color: #fff;
    display: block;
    float: right;
    font-size: 14px;
    height: 32px;
    margin: 0 0 0 5px;
    padding: 10px 15px 10px 30px; // change padding to something like this
    text-align: center;
    text-indent: -9999px; // delete indention
    transition-duration: 0s;
    width: 32px; // delete width
}

So your final code should be something like this

.qa-form-light-button-flag{
    background-image: url("images/icons/flag-white.png");
    background-position: 10px center;
}

.qa-form-light-button {
    background: #2c3e50 none no-repeat scroll center center;
    border: 0 none;
    color: #fff;
    display: block;
    float: right;
    font-size: 14px;
    height: 32px;
    margin: 0 0 0 5px;
    padding: 10px 15px 10px 30px;
    text-align: center;
    transition-duration: 0s;
}

If you can't find exact text than try to find class it should be there in both direction css for sure.

Also this example is showing for .qa-form-light-button-flag but you have to go through all buttons class to change the icon position. Usually, all should be in sequence in css file  

Comments

I did access the file qa-theme / snowflat / rtl.css but I did not find the code that you wrote above
Please , Exactly  where I can add the text to appear beside the buttons ?

---

I do not know where I can paste the text exactly  so I will change the icon
images/icons/flag-white.png
to an other text image with the same name and format and replace it with the icon