Как поставить число в правом верхнем углу значка корзины?

Я хотел бы разместить число в правом верхнем углу значка корзины шрифта awesome.

Я создал этот простой HTML.

   <!DOCTYPE html>
    <html>
    <head>
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <style>
    </style>
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>

    <i class = "fa" style = "font-size:24px">&#xf07a;</i>
    <span> 5 </span>

    </body>
    </html>

Результат следующий.

Как поставить число в правом верхнем углу значка корзины?

Как сделать так, чтобы номер отображался в правом верхнем углу значка тележки, как показано на следующем изображении?

Как поставить число в правом верхнем углу значка корзины?

Я ценю любую помощь от экспертов css. Спасибо!

Поделитесь своим кодом и покажите, что вы еще пробовали

— 12.07.2018 13:14

читать о свойствах позиции

— 12.07.2018 13:16

я знаю, как разместить поверх изображения. как разместить поверх элемента <i>?

— 12.07.2018 13:24

html css font-awesome

12.07.2018 13:12

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

29 516

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

span{
    font-size: 14px;
    font-weight: 900;
    position: absolute;
    border: solid blue;
    border-radius: 60%;
    height: 14px;
    width: 8px;
    background:blue;
}

<!DOCTYPE html>
    <html>
    <head>
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <style>
    </style>
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>

    <i class = "fa" style = "font-size:24px">&#xf07a;</i>
    <span> 5 </span>

    </body>
    </html>

Благодарность! Возможно ли небольшое перекрытие, как показано на изображении.

— 12.07.2018 13:20

12.07.2018 13:17

Ответ принят как подходящий

Кажется, на это уже был дан ответ: Корзина - количество товаров в корзине CSS

Изменил код под ваш запрос: http://jsfiddle.net/LhrLe0j6/361/

<i class = "fa" style = "font-size:24px">&#xf07a;</i>
<span class='badge badge-warning' id='lblCartCount'> 5 </span>

CSS:

.badge {
  padding-left: 9px;
  padding-right: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

.label-warning[href],
.badge-warning[href] {
  background-color: #c67605;
}
#lblCartCount {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
    margin-left: -10px; 
}

12.07.2018 13:25

Вы можете добиться того же без дополнительного тега span, используя псевдоэлементы того же тега i. Значение можно указать в атрибуте value соответствующего значка.

.badge:after{
content:attr(value);
font-size:12px;
background: red;
border-radius:50%;
padding:3px;
position:relative;
left:-8px;
top:-10px;
opacity:0.9;
}

    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  

    <i class = "fa badge" style = "font-size:24px" value=5>&#xf07a;</i>

12.07.2018 13:37

Деформируйте элементы с помощью такого div,

<style>

.wrapper{
position: relative;
}
.wrapper span{
position: absolute;
top: -2px;
right: -2px; 
}

</style>

<body>

<div class = "wrapper">
<i class = "fa" style = "font-size:24px">&#xf07a;</i>
<span> 5 </span>
</div>

</body>

12.07.2018 13:38

Другие вопросы по теме

Сортируемые списки JQuery - ConnectWith списки, для доступа к которым требуется прокрутка

Центрировать содержимое в ячейке сетки данных четкости

Карусель Bootstrap 4.1 не отображается в Internet Explorer 11

Я хочу отображать HTML-страницу, а НЕ отображать изображение. Но код пытается неправильно открыть изображение

Применить: фокус для имени класса в html css

Добавление горизонтальных и вертикальных градиентов затухания к элементу

Где я должен / и как мне создать свою 'структуру каталогов'

Как разместить элемент внутри div на той же высоте, что и другой элемент в том же div

Не могу вставить данные в базу данных laravel ajax

Запомните положение анимации на страницах

Как поставить число в правом верхнем углу значка корзины?

Ответы 4

Другие вопросы по теме

Похожие вопросы