Я хочу добавить изображение корзины рядом с моим товаром на панели навигации. Есть ли способ сделать это, используя только css? Я подумал, может быть: after {} где-нибудь сработает.

Вот ссылка на мой сайт: http://poloniafoods.weebly.com/store/c1 /Featured_Products.html

Заранее спасибо, Джастин.

0
justinpees 6 Сен 2016 в 18:23

3 ответа

Лучший ответ

Вы можете добавить тег after к элементу cart li. Используйте контент с URL-адресом, чтобы указать на абсолютный путь к изображению. Поиграйте с размером и расположением в зависимости от желаемого результата.

.wsite-nav-cart:after {
    content: url('http://placehold.it/50');
    position: absolute;
    right: 0;
    top: 0;
    height: 10px;
    width: 10px;
}
1
dbochen 6 Сен 2016 в 15:36

Самый простой способ сделать это - просто использовать иконки с классным шрифтом. Просто используйте этот код там, где вам нужно.

<i class="fa fa-shopping-cart" aria-hidden="true"></i>

И если вы хотите увеличить размер корзины. просто добавьте дополнительный класс fa-2x

И да, вам нужно использовать cdn значка font awesome icon.

Просто зайдите на их сайт и получите компакт-диск. Просто добавьте его перед тегом <html>, как в теге скрипта ниже.

<script src="https://use.fontawesome.com/someUniqueId.js"></script>

это их сайт

0
puneeth8994 6 Сен 2016 в 15:31

Конечно, вы можете использовать фоновое изображение в CSS.

Например.

#wsite-nav-cart-a {
    position: relative;
    background: url(http://www.clker.com/cliparts/U/D/n/G/6/h/white-shopping-cart-md.png) 2px 8px no-repeat;
    background-size: 20px;
    padding-left: 30px;
}

Я бы посоветовал создать класс, а не использовать этот идентификатор.

0
Paul Redmond 6 Сен 2016 в 15:32