Using this plugin without any customization
$(function(){
$('#font-setting').easyView();
});
<div id="font-setting"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lacus magna, eleifend convallis sem vulputate vitae. Mauris vel nisi a mauris tempus venenatis. Aliquam semper metus mi, id imperdiet velit molestie a. In hac habitasse platea dictumst. Suspendisse quis ligula interdum, ultricies nibh non, fringilla tortor. Nunc vitae gravida sapien. Aenean vel mollis neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lacus magna, eleifend convallis sem vulputate vitae. Mauris vel nisi a mauris tempus venenatis. Aliquam semper metus mi, id imperdiet velit molestie a. In hac habitasse platea dictumst. Suspendisse quis ligula interdum, ultricies nibh non, fringilla tortor. Nunc vitae gravida sapien. Aenean vel mollis neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lacus magna, eleifend convallis sem vulputate vitae. Mauris vel nisi a mauris tempus venenatis. Aliquam semper metus mi, id imperdiet velit molestie a. In hac habitasse platea dictumst. Suspendisse quis ligula interdum, ultricies nibh non, fringilla tortor. Nunc vitae gravida sapien. Aenean vel mollis neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lacus magna, eleifend convallis sem vulputate vitae. Mauris vel nisi a mauris tempus venenatis. Aliquam semper metus mi, id imperdiet velit molestie a. In hac habitasse platea dictumst. Suspendisse quis ligula interdum, ultricies nibh non, fringilla tortor. Nunc vitae gravida sapien. Aenean vel mollis neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lacus magna, eleifend convallis sem vulputate vitae. Mauris vel nisi a mauris tempus venenatis. Aliquam semper metus mi, id imperdiet velit molestie a. In hac habitasse platea dictumst. Suspendisse quis ligula interdum, ultricies nibh non, fringilla tortor. Nunc vitae gravida sapien. Aenean vel mollis neque.
Using custom buttons
$(function(){
$('#font-setting-buttons').easyView({
increaseSelector: '.increase-me',
decreaseSelector: '.decrease-me',
normalSelector: '.reset-me',
contrastSelector: '.change-me'
});
});
<div id="font-setting"> <div class="btn-group"> <button type="button" class="btn btn-default decrease-me"><i class="glyphicon glyphicon-minus"></i> Decrease</button> <button type="button" class="btn btn-default reset-me"><i class="glyphicon glyphicon-font"></i> Normal</button> <button type="button" class="btn btn-default increase-me"><i class="glyphicon glyphicon-plus"></i> Increase</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default change-me"><i class="glyphicon glyphicon-adjust"></i> Contrast</button> </div> </div>