voting arrows like stack overflow with bootstrap, how do I reduce the size of glyph-icon items and bring them tighter

Question

Hello I'm trying to implement voting system like stack overflow, I've finished the backend//whole functionality but I'm having problem displaying them in UI. right now, the arrows look too far apart and the number isn't quite centered. Also if it's possible I want the color of the arrow to be toggled when clicked/unclicked. I've tried this, but keep getting messed up UI. Can someone please help me with this? thank you in advance.

<td class="vert-align">
          <div>
       <a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
  <span class="glyphicon glyphicon-triangle-top" style="" aria-hidden="true"></span></a> 
            <br /> //upper arrow

<span class="number"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span>     <br> //number gets displayed here

<a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a>
        </div> //under arrow
          </td> 

Also I have one js file for this voting

function vote(node) {
    var thread_id = node.attr("href").split('\/')[2];
    $.ajax({
        url: node.attr("href"),
        dataType: "json",
        success: function(data) {
            $("#vote_count_"+thread_id).html(data.count);
        },
        error: function(data) {
            alert(data.responseJSON.error_message);
        }
    });
}

$("a.vote").on("click", function() {
    vote($(this));
    return false;
});

thank you.

Answer 1

To achieve this design with bootstrap (which I can see that you are using) you can simply use this template :

<div class="row">            
    <div class="col-md-1" style="font-size: 30px; color:#606060; text-align: center;">
        <span class="glyphicon glyphicon-triangle-top col-md-12"></span>
        <span class="col-md-12">0</span><!-- Number goes here -->
        <span class="glyphicon glyphicon-triangle-bottom col-md-12"></span>
    </div>
</div>

If you want to toggle the arrow color when clicked use a Javascript method that uses a var (boolean) to determine wether the button is clicked or not, then with the jQuery method .css() you can change the color of the wanted button.

Live example - http://www.bootply.com/6KzWhJefif