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:

Current

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..

New

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.

theme should be a template - one file. Then template is populated with questions (they might come from database). Or if site is all html, you might just automate replacement. — animaacija, Jun 16 '15 at 23:17
Perhaps you didn't understand the question? I just want to add font awesome to icons as displayed in the screenshots. — Michael Yebba Jr, Jun 17 '15 at 14:19
i ussually use fontawesome cheatsheet using these ;&1234 .. instead of tagg — animaacija, Jun 18 '15 at 14:36

Chun · Answer 1 · 2017-03-16T16:53:56.247

To add the icons as  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 . But instead of using an  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  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>

I dig your shorthand on that JSFiddle (for real). On the flipside; as for changing the PHP file wherever the code for this button is being generated.. it should be in qa-theme-base.php... and I just wish you could see what that code looks like.. Not once do I ever see the word "Edit this question" or anything like that.. so how in the world does it generate it?! Confusing! :P — Michael Yebba Jr, Jun 18 '15 at 19:23

Adding Font Awesome to Q2A Page Form Buttons

1 Answers1