Bootstrap Font Awesome Badge с номером - PullRequest
Новая
       31

Bootstrap Font Awesome Badge с номером

0 голосов
/ 15 мая 2018

У меня есть навигация со значком колокольчика.Я хотел бы добавить значок, который содержит число в правом верхнем углу значка (как в некоторых приложениях для Android).Я нашел несколько блогов, которые выполняют это добавление числа в css, но мне нужно добавить число на стороне сервера, сделав что-то вроде этого: 

<span>$number</span>

Было бы лучше.

Выглядит пока так: 

        <li class="nav-item dropdown">
            <a href="#" id="navbar-inquiries-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                <i class="fas fa-bell"></i>
                // here add badge????
            </a>
            <ul class="nav-item dropdown-menu" role="menu" aria-labelledby="navbar-inquiries-dropdown">
               <li class="nav-item">
                    <a class="dropdown-item" href="{{ route('inquiry.index') }}">
                        Requests
                    </a>
                </li>
            </ul>
        </li>

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

FontAwesome имеет это в своей документации.

Взгляните на https://fontawesome.com/how-to-use/svg-with-js и найдите Слои, текст и счетчики

SVG с JS требуетвам использовать версию FontAwesome JS.Последнюю ссылку CDN можно найти здесь: https://fontawesome.com/get-started/svg-with-js

<span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-bell"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>`

Вы можете расположить счетчик, используя следующие классы: fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left и значение по умолчанию fa-layers-top-right

0 голосов
/ 15 мая 2018

Можете ли вы попробовать это и дайте мне знать, если это было то, что вы хотели 

<i class="fas fa-bell badge-wrapper">
  <span class='badge badge-secondary'>21</span>
</i>

Style 

.badge-wrapper {
     position: relative;
 }

 .badge {
     position: absolute;
     top: 0;
     right: -5px;
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: #ddd;
 }
...