JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css">
<div>
	<button 
		id="fixed-button1" 
		class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
	<button
		id="fixed-button2"
		class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
	<button
		id="fixed-button3"
		class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
</div>

CSS

#fixed-button1, #fixed-button2, #fixed-button3 {
    position: relative; 
    text-align: right; /* keep the text to right */
    font-size: 11px;   /* reduce the font-size to accomodate */
    padding-top: 0px; padding-right: 6px; /* adjust the padding to keep the text on top-left */
}
#fixed-button1::before, #fixed-button2::before, #fixed-button3::before {
    display: block; position: absolute; /* position relative to the parent button */
    top: 0%; left: 45%;                 /* position to center with enough space for text */
    font-size: 26px; padding-top: 15px; /* reset the changed properties of parent */
    transform: translate(-50%, 0%);     /* to make it centered */
}
#fixed-button1:empty::before, #fixed-button2:empty::before, #fixed-button3:empty::before {
    left: 50%;                          /* if no text, we need to shift the icon to center  */
}

/* following style is only for demo purpose in this snippet */
div, #fixed-button1, #fixed-button2, #fixed-button3 { margin: 24px; }

JavaScript

$("#fixed-button2").text('4');
$("#fixed-button3").text('42');