<!-- text size menu-->
<div class="container">
    <div class="row">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="bigger" id="bigger">
                    <i class="fa fa-expand" aria-hidden="true"></i>
                    <span>א</span>
                </a>
            </li>
            <li>
                <a href="#" aria-label="reset" id="reset">
                    <i class="fa fa-ban" aria-hidden="true"></i>
                    <span>א</span>
                </a>
            </li>
            <li>
                <a href="#" aria-label="smaller" id="smaller">
                    <i class="fa fa-compress" aria-hidden="true"></i>
                    <span>א</span>
                </a>
            </li>
        </ul>
        <!-- /.pagination -->
    </div>
    <!-- /.row -->
</div>
<!-- /.container -->

<!-- /text size menu-->
<script>
//font-size control

    function font_change_size(element, size) {
        var init = parseInt($('body').css('font-size'));
        var current = parseInt(element.css('font-size'));
        var body = $('body');
        if( size == 'smaller'){
            var new_size = current - 2;
        } else if ( size == 'bigger'){
            var new_size = current + 2;
        } else if ( size == 'reset'){
            var new_size = init;
        }
        element.css('font-size', new_size + 'px');

    }
    $('#smaller').click(function (e) {
        event.preventDefault();
        font_change_size($(body), 'smaller');
    });

    $('#reset').click(function (e) {
        event.preventDefault();
        font_change_size($(body), 'reset');
    });
    $('#bigger').click(function (e) {
        event.preventDefault();
        font_change_size($(body), 'bigger');
    });
    </script>