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

我在页面右下角有一个浮动材质按钮：

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

我想做的是，使quantity值的字体大小变小，并将其推到购物车的右上角

我试着用

边距底部编辑
固定按钮的属性，以喜欢
8px
，但结果只是将整个购物车图标和字母本身推高了8个像素

我想现在的情况是，购物车图标和字母都被视为文本值，这对我来说并不奇怪

如何只修改数量值而不修改购物车图标的CSS属性？
尝试使用百分比字体大小。
这有助于：

 font-size: 100%;

元素的css规则将影响整个元素。我相信您的猜测是准确的，
mdi action购物车
类确实在元素中插入了某种形式的文本（可能使用特殊字体）。然后，该文本将受到
font size
或类似规则的影响

然而，使用
或类似的内联标记来表示数量，可以让您独立地设置样式

使用该方法，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>

这样，您就可以在css中分离元素的样式，如下所示：

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

看起来您使用的是来自css的材质设计

样式在该样式表的
.btn.btn fab
类中定义。图标是按钮的
伪元素之前的
：：的内容属性，即
内联块
。伪元素继承了按钮的
font-size
属性，因此无法正确地重新设置其样式。此外，在将导致文本移出按钮的内容上定义了填充

您需要覆盖用例的样式，即
#固定按钮
，并在
伪元素之前重置其
：

为了能够轻松地控制它，最好将按钮设置为相对位置，并将其伪元素设置为绝对位置。然后小心地调整填充，以适应要放入按钮的额外文本

一个粗略的示例（代码注释中给出了解释）：


$（“#固定按钮2”）.text（'4'）；
$（“#固定按钮3”）.text（'42'）
#固定按钮1、#固定按钮2、#固定按钮3{
位置：相对位置；
文本对齐：右；/*保持文本向右对齐*/
字体大小：11px；/*减小字体大小以适应*/
顶部填充：0px；右侧填充：6px；/*调整填充以保持文本位于左上角*/
}
#固定按钮1:：before，#固定按钮2:：before，#固定按钮3:：before{
显示：块；位置：绝对；/*相对于父按钮的位置*/
顶部：0%；左侧：45%；/*位置居中，有足够的文本空间*/
字体大小：26px；顶部填充：15px；/*重置父级的更改属性*/
变换：平移（-50%，0%）；/*使其居中*/
}
#固定按钮1:empty:：before，#固定按钮2:empty:：before，#固定按钮3:empty:：before{
左：50%；/*如果没有文本，我们需要将图标移到中间*/
}
/*以下样式仅用于此代码段中的演示目的*/
div、#fixed-button1、#fixed-button2、#fixed-button3{边距：24px；}

您是否有一个实时链接以便我们进行测试？请提供“btn btn fab btn raised btn-MATERY-WELLOY-600 mdi-action-SHOPING-cart”类的相关CSS是否可以将数量放入
标签中？如问题所述，这样做会修改数量图标和数量编号。我没有忽略你的答案-我现在要睡觉了，明天我会测试你的答案。不过这看起来很有希望-谢谢。这绝对是我想要的，谢谢。我将空和非空的
left
vars都更改为45%，因为我不喜欢购物车在有值时向左移动。现在这两种情况都只有45%。我有一个问题-我想在字母后面加一个红色圆圈（只比字母略大），比如应用图标上的iOS通知。我添加了这个字符串：
content:'\25CF'：：before
（不是空的）中的code>，但它似乎取代了所有内容..伪元素的content属性用于显示购物车图标。您需要使用单独的元素来显示通知样式。我的回答将引导你走向正确的方向：太好了。我现在正在调查此事。我是否应该将文本作为一个新的跨度来使用它呢？我遇到的问题是，在初始加载时，jewel可以工作。但当我按下“添加到购物车”按钮时，AJAX更新如下：
$（'#jewel'）.text（''）；$。getJSON（{url（'schedulizer/cart'）}}），函数（data）{if（data.quantity>0）{$（'jewel'）.text（data.quantity）；}}，并返回到原始样式。是。需要一个单独的跨度。
：：after
伪元素也可以与按钮上的
data
属性一起使用。这里早过午夜了。早上我会尽力帮你的。
$('#quantity').text('');
    $.getJSON("{{ url('schedulizer/cart') }}", function(data) {
        if(data.quantity > 0) {
            $('#quantity').text(data.quantity);
        }
    });

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