如何使用html和css生成以下控件

Question

我正在尝试使用HTML / CSS创建以下控件。我需要有关使用HTML和CSS实现此功能的最佳方法的建议。我能够使用不同的anchor（）标记来实现它。但我不确定这是最好的方法，因为它都有相同的目的。

链接，蓝色圆圈和购物车图标应该会将您带到另一个页面。

另外 - 对于我正在实现font-awesome的图标。 http://fortawesome.github.io/Font-Awesome/icons/

任何意见和建议都将不胜感激！

这是一张图片：

到目前为止，这是我的HTML - 但我不认为这是最好的方法......

        <div id="check_out_utility" class="float_right">
          <a id="check_out_utility_link" class="white_link float_left" href="#">Check Out</a>
          <div id="shopping_cart" class="float_right">
            <i class="fa fa-shopping-cart fa-3x white_color"></i>
          </div>
        </div>

再次，谢谢

Answer 1

您可以在购物车图标中使用绝对定位。

我从头开始构建一个快速示例

<强> HTML：

<a class="cart" href="#">
    Checkout
    <span class="fa  fa-2x fa-shopping-cart">
        <span class="badge">3</span>
    </span>
</a>

<强> CSS：

.cart {
    background-color: #2F4178;
    display: inline-block;
    width: 200px;
    height: 20px;
    text-decoration: none;
    color: #FFF;
    padding: 20px;

}

.cart .fa {
    position: relative;
}
.cart .badge {
    display: inline-block;
    background-color: #478BFF;
    border-radius: 50%;
    padding: 3px;
    color: #FFF;
    width: 10px;
    height: 10px;
    text-align: center;
    font-size: 11px;
    position: absolute;
    bottom: 0;
    left: 0;
}

小提琴：http://jsfiddle.net/jqac30Lz/