修改文本的属性而不是按钮上的CSS图标

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:

购物车图标本身是类mdi-action-shopping-cart,购物车数量使用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.

我尝试使用margin-bottom编辑固定按钮的属性,使其像8px一样,但最终只是将整个购物车图标和字母本身推到8像素。

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?

如何修改数量值的CSS属性而不是购物车图标?

3 个解决方案

#1

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

看来你正在使用这里的材料设计css。

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.

样式在该样式表的.btn.btn-fab类中定义。该图标是按钮的:: before伪元素的内容属性,它是内联块。伪元素继承了按钮的font-size属性,因此您无法正确地重新设置样式。此外,还有定义的填充,这将导致文本移出按钮。

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

您需要覆盖用例的样式,即#fixed-button并重置其:: before伪元素。

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/

也是你玩的小提琴: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.

如果您需要将文本用作通知气泡,那么您可以使用另一个伪元素::在按钮之后轻松地执行此操作。您将不得不对使用文本的方式进行一些更改..而不是使用按钮的文本内容来指示数量,使用按钮上的数据属性。将该属性用作:: after伪元素的内容。

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.

为了能够在数量为零时隐藏通知气泡,请根据类应用样式。然后在您的Javascript代码中添加/删除您正在根据您的ajax调用更新数量的类。

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)

示例代码段2 :(在此示例中,我使用data-qty作为可用于更新数量的属性。类.qty用于控制可以添加/删除的:: after伪元素关于数量)

$("#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/

小提琴2:http://jsfiddle.net/abhitalks/z63qf4xb/1/

.

#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.

元素的css规则将影响整个元素。我相信你的猜测是准确的,mdi-action-shopping-cart类确实在元素中插入了某种形式的文本(可能使用特殊字体)。该文本将受到font-size或类似规则的影响。

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:

使用该方法,html看起来像这样:

<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:

使用javascript,您可以通过设置数量范围的文本而不是按钮来更改数量:

$('#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:

反过来,这会让你在css中分离元素的样式,如下所示:

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

#3

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

尝试使用百分比字体大小。这有助于:

 font-size: 100%;

Font-Size for Button and Link

按钮和链接的字体大小