Is there a way to change all input icons for buttons with PHP?

Question

I'm working on a theme and I came up with a Javascript solution to replace all  <input type="submit">  icons, for <button>.

The thing is I'm wondering if there's a PHP solution or qa-theme.php alternative that I'm not aware of, to do it on the fly.

Beause using elements are constantly being changed on user interactions, like voting, selecting an answer as best answer, favoriting and so on. Right now I have a temporary solution width DOMNodeInserted , but it's not working quite well, and I'm almost giving up on this and run a timeout function to constantly be checking for changes to apply that HTML tag swap, but I'm afraid that will consume lots of memory memory.

I'm doing this because I want to implement font-awesome icons, and inputs doesn't allow me do create pseudo elements (  :before  ).

Answer 1

Yes in your custom theme you'll need to override the form_button_data function. Copy the code for that function from qa-theme-base.php and change to your liking.

There are various other special buttons in the theme too, including voting buttons (post_hover_button & post_disabled_button functions), and favoriting (favorite_button function).

Comments

Thank you so much @scott I was going crazy working on this Lol. I will post the code here as an answer so it saves time for people who want to do the same.

---

Thanks for the  answer. I have implement something matchin your answer in the past.

Answer 2

Thank you very much @Scott for your answer. With your help I successfully upgraded all of the old icons that were  inputs  before, to new  <button>  versions of them.

The Material Design theme development is afoot again and will be available for download very soon.

In case anyone is wondering how I did it, here's the code I added to my template  (qa-theme.php)  to make the changes.

public function notice($notice){

$this->output('<div class="qa-notice" id="'.$notice['id'].'">');

if (isset($notice['form_tags']))

$this->output('<form '.$notice['form_tags'].'>');

$this->output_raw($notice['content']);

$this->output('<button '.$notice['close_tags'].' type="submit" value="X" class="qa-notice-close-button"></button>');

if (isset($notice['form_tags'])) {

$this->form_hidden_elements(@$notice['form_hidden']);

$this->output('</form>');

}

$this->output('</div>');

}

public function search_button($search){

$this->output('<button type="submit" value="'.$search['button_label'].'" class="qa-search-button"></button>');

}

public function favorite_button($tags, $class){

if (isset($tags))

$this->output('<button '.$tags.' type="submit" value="" class="'.$class.'-button"></button> ');

}

public function form_button_data($button, $key, $style){

$baseclass = 'qa-form-'.$style.'-button qa-form-'.$style.'-button-'.$key;

$this->output('<button'.rtrim(' '.@$button['tags']).' value="'.@$button['label'].'" title="'.@$button['popup'].'" type="submit"'.

(isset($style) ? (' class="'.$baseclass.'"') : '').'>'.@$button['label'].'</button>');

}

public function post_hover_button($post, $element, $value, $class){

if (isset($post[$element]))

$this->output('<button '.$post[$element].' type="submit" value="'.$value.'" class="'.$class.'-button"></button>');

}

public function post_disabled_button($post, $element, $value, $class){

if (isset($post[$element]))

$this->output('<button '.$post[$element].' type="submit" value="'.$value.'" class="'.$class.'-disabled" disabled="disabled"></button>');

}

All of the changes in the code above were targeted only for inputs of the type submit. I'll try to keep this post up to date in case I find any bugs, or missing buttons while developing the theme.