Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Django e-commerce part33 Shopping Cart Icon

Shopping Cartのアイコンを設定する。

navbar.htmlを編集する。

      <ul class="nav navbar-nav navbar-right">
            <li>
                <a href='#'><span class='badge'>0</span><i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
            </li>
  • カートのアイコンは、font awesomeから持ってくる。

  • ポイントは、<span class='badge'>0</span> 。ここに、カートのアイテム数をcontextなどで渡せば、表示できる。

css fa-navbar-cartを設定する。

customcss を設定する。

<a href='#'><i class="fa fa-shopping-cart fa-navbar-cart" aria-hidden="true"></i><span class='badge'>0</span></a>

customs.css

.fa-navbar-cart {
    font-size: 10px;
    vertical-align: middle;
}