Question

我使用＆＃34; Font Awesome＆＃34;。

在bootstrap上创建了一个篮子

1）如何用红色写徽章？

2）如何将徽章放在购物车上？

<a href="/cart">
<i class="fa fa-shopping-cart fa-3x"></i>
<span class="badge">[quantity]</span>
<span>[commerce_order_total]</span>
</a>

Answer 1

你在找这个吗？

https://plnkr.co/edit/tL6GLun9iG5R9ifaaG74?p=preview

我只是复制粘贴了我已经使用的一段代码，根据您的需要进行修剪和调整

HTML

   <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
  <a href="#" class="btn btn-default btn-lg">
    <i class="fa fa-shopping-cart fa-3x"></i>
    <span class="bs-badge badge-absolute float-right badge-red">87</span>
  </a>
</body>

</html>

CSS

/* Styles go here */

a {
  outline: 0;
}

.btn {
  border-radius: 3px;
  font-weight: 400;
  position: relative;
  display: inline-block;
  padding: 0 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background-image: none;
}


.fa {
  color: green;
}

.btn-lg {
  font-size: 18px;
  padding: 0 16px;
  line-height: 44px;
  min-width: 56px;
  height: 46px;
}

.bs-badge.badge-absolute.float-right {
  right: -4px;
  left: auto;
}

.bs-badge.badge-absolute {
  position: absolute;
  z-index: 5;
  top: -6px;
  left: -15px;
}

.bs-badge {
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 4px 0 5px;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
  color: #fff;
  border-radius: 10px;
}

.badge-red {
  background: red;
  border-color: #7a3ecc;
}


}

个性化Bootstrap主题？

1 个答案: