Modifying the properties of the text and not the CSS icon on a button

Question

I have a floating material button described in the bottom right of the page:

<button
    id="fixed-button"
    class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart">
</button>

The cart icon itself is the class mdi-action-shopping-cart, and the cart quantity is added to the button using AJAX:

        $('#fixed-button').text('');
        $.getJSON("{{ url('schedulizer/cart') }}", function(data) {
            if(data.quantity > 0) {
                $('#fixed-button').text(data.quantity);
            }
        });

What I want to do is, make the font size of the quantity value smaller, and push it to the top right of the cart.

I tried editing the property of the fixed-button with margin-bottom to like 8px, but that ended up just pushing the entire cart icon AND the letter itself up 8 pixels.

I think what's happening is, the cart icon and the letters are both treated as text values, which really isn't surprisingly to me.

How do I modify the CSS properties of just the quantity value and not the cart icon?

Answer 1

It seems you are using the material design css from here.

The style is defined in the .btn.btn-fab class of that stylesheet. The icon is the content property of the ::before pseudo-element of the button, which is inline-block. The pseudo-element is inheriting the font-size property of the button and hence you are not able to re-style it properly. Also, there is padding defined on that which will cause the text to move out of the button.

You need to override the styles for your use-case, i.e. #fixed-button and reset its ::before pseudo-element.

To be able to control it easily, it would be better if you made the button as relatively positioned and its pseudo-element absolutely positioned. Then carefully adjust the padding to accommodate the extra text you are putting into the button.

A rough example (explanation given in the code comments):

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

#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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<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>

Also a fiddle for you to play with: http://jsfiddle.net/abhitalks/efma9bt9/

---

Update

(per op comments)

If you need to use the text as a notification bubble, then you can easily do that using another pseudo-element ::after on the button. You will have to make a little change in the way you use the text.. instead of using text content of the button to indicate the quantity, use a data- attribute on the button. Use that attribute as content for the ::after pseudo-element.

In order to be able to hide the notification bubble when the quantity is zero, apply the styles based on a class. Then add/remove the class in your Javascript code where you are updating the quantity based on your ajax call.

Example Snippet 2: (In this example, I've used data-qty as the attribute which can be used to update the quantity. The class .qty is used to control the ::after pseudo-element which you can add/remove based on the quantity)

$("#fixed-button2").attr('data-qty', '4').addClass('qty');
$("#fixed-button3").attr('data-qty', '42').addClass('qty');

#fixed-button1, #fixed-button2, #fixed-button3 {
    position: relative; 
    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: 50%;                 /* 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.qty::after, #fixed-button2.qty::after, #fixed-button3.qty::after {
    content: attr(data-qty);
    display: block; position: absolute;
    top: 0px; right: 0px; height: 20px; width: 20px; 
    font-size: 11px; line-height: 18px;
    background-color: #f00; color: #fff;
    border-radius: 50%; padding: 0;
}

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

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

Fiddle 2: http://jsfiddle.net/abhitalks/z63qf4xb/1/

.

Answer 2

A css rule for an element will impact that entire element. I believe your guess is accurate and the mdi-action-shopping-cart class indeed inserts some form of text (likely using a special font) in the element. That text would then be impacted by rules like font-size or similar.

Using a <span> or similar inline tag for the quantity well let you style it independently, however.

Using that method, the html would look something like this:

<button
    id="fixed-button"
    class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart">
    <span id="quantity" class="shopping-cart-quantity"></span>
</button>

Using javascript you could then alter the quantity by setting the text of the quantity-span instead of the button:

$('#quantity').text('');
    $.getJSON("{{ url('schedulizer/cart') }}", function(data) {
        if(data.quantity > 0) {
            $('#quantity').text(data.quantity);
        }
    });

This would, in turn, let you separate the styles for the element in css, like so:

.shopping-cart-quantity {
    margin-bottom: 8px;
    font-size: 10px;
}

Answer 3

Try using font size in percentage. This can help like:

 font-size: 100%;

Font-Size for Button and Link