Adding Font Awesome to Q2A Page Form Buttons

Question

These are not just any buttons I'm talking about.. but the buttons under each question or answer that say "edit", "flag", "ask related question", "answer", etc.

Each of these buttons are under the parent div "qa-q-view-buttons"..

Take this section for example...

Here's what it looks like now:

as well as the HTML of what it looks like now...

<div class="qa-q-view-buttons">
<input name="q_doedit" value="edit" title="Edit this question" type="submit" class="qa-form-light-button qa-form-light-button-edit">
<input name="q_doclose" value="close" title="Close this question to any new answers" type="submit" class="qa-form-light-button qa-form-light-button-close">
<input name="q_dohide" onclick="qa_show_waiting_after(this, false);" value="hide" title="Hide this question" type="submit" class="qa-form-light-button qa-form-light-button-hide">
<input name="q_doanswer" id="q_doanswer" onclick="return qa_toggle_element('anew')" value="answer" title="Answer this question" type="submit" class="qa-form-light-button qa-form-light-button-answer">
</div>

by doing some simple HTML editing.. I'm able to add Font Awesome to these buttons very easily.

Here's some modifications I can make to do EXACTLY what I desire.

<div class="qa-q-view-buttons">
<button name="q_doedit" value="edit" title="Edit this question" type="submit" class="qa-form-light-button qa-form-light-button-edit">
<i class="fa fa-edit"></i> Edit</button>
<button name="q_doclose" value="close" title="Close this question to any new answers" type="submit" class="qa-form-light-button qa-form-light-button-close">
<i class="fa fa-close"></i> Close </button>
<button name="q_dohide" onclick="qa_show_waiting_after(this, false);" value="hide" title="Hide this question" type="submit" class="qa-form-light-button qa-form-light-button-hide">
<i class="fa fa-eye-slash"></i> Hide</button>
<button name="q_doanswer" id="q_doanswer" onclick="return qa_toggle_element('anew')" value="answer" title="Answer this question" type="submit" class="qa-form-light-button qa-form-light-button-answer">
<i class="fa fa-comment"></i> Comment</button>
</div>

Which ends up looking like this..

The only issue? Q2A isn't directly HTML-editable.. I made these changes in the "Inspect Element" --> "Edit as HTML" section of the Source Editor on Google Chrome. That means I am going to need to sort through Q2A's qa-theme-base.php file and edit it directly with PHP code, right?

Can anyone point me in the right direction? I have no idea where to start.

Answer 1

To add the icons as <i class="fa fa-edit"></i> you would need to change the PHP file wherever the code for this button is being generated (I can't remember where this is now) in order to add that <i class>. But instead of using an <i> which is by default the way suggested to implement the icons, you can always use hacks to do the same, like instead of using the <i> tags, you can use it as a :before for the classes you want to implement those icons,

It would be something like this:

.qa-form-light-button-edit:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    content: "\f040";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    margin-right:3px; /* Add a margin if you want */

    /* code below same as Font-awesome .fa-fw for 'navigation' icons */
    width: 1.28571429em;
    text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- example of normal Q2A Edit button below -->
<button name="q_doedit" value="edit" title="Edit this question" type="submit" class="qa-form-light-button qa-form-light-button-edit">Edit</button>