How to align badge on top of icon

PeeJay

I am trying to add badge over a fontawesome icon but it's not getting aligned properly. Whatever I try, it either comes in the top or on the below. But I am trying to add it over the icon.

Please tell me what am I missing.

Thank You!

@import url('//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
.menutoggle {
    float: left;
    width: 50px;
    height: 52px;
    font-size: 22px;
    cursor: pointer;
    color: #1d2939;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.menutoggle i {
    padding:15px;
  padding-bottom:0px;
}

.menutoggle:hover {
    color: #1d2939;
    background-color: #f7f7f7;
}

.badge{
  display:inline-block;
  min-width:10px;
  padding:3px 7px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  vertical-align:baseline;
  background-color:#777;
  border-radius:10px
}
<ul>
        <li>
           <div class="menutoggle"> 
               <i class="fa fa-cog"></i>
             <span class="badge">1</span>
           </div>
        </li>
</ul>

dfsq

You need to position badge elements relatively to their parent menutoggle containers. For this set position: relative; to .menutoggle and position: absolute; for badges with desired top and left/right values.

@import url('//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
.menutoggle {
    position: relative;
    float: left;
    width: 50px;
    height: 52px;
    font-size: 22px;
    cursor: pointer;
    color: #1d2939;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}
.menutoggle i {
    padding:15px;
    padding-bottom:0px;
}
.menutoggle:hover {
    color: #1d2939;
    background-color: #f7f7f7;
}
.badge {
    position: absolute;
    top: 0;
    right: 0;
    display:inline-block;
    min-width:10px;
    padding:3px 7px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    color:#fff;
    text-align:center;
    white-space:nowrap;
    vertical-align:baseline;
    background-color:#777;
    border-radius:10px;
}
<ul>
    <li>
        <div class="menutoggle"> 
            <i class="fa fa-cog"></i>
            <span class="badge">1</span>
        </div>
    </li>
</ul>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to correctly align inline navpills with badge in bootstrap

From Dev

How to correctly align inline navpills with badge in bootstrap

From Java

Display badge on top of bottom navigation bar's icon

From Dev

Android - how to add a badge count to an application icon?

From Dev

How to find out the Icon Badge count?

From Dev

How to reset the Badge app icon number?

From Dev

align icon on top of text inside button tag

From Java

How to add badge on top of Font Awesome symbol?

From Dev

how to align submenu on top

From Dev

how to align the number in MarkerClusterer icon?

From Dev

how to align the number in MarkerClusterer icon?

From Dev

How to align an icon to the right of content

From Dev

How to vertically align icon font

From Dev

QPushButton: How to align icon and text

From Dev

How to add a notification badge/count to application icon on Sony Xperia devices?

From Dev

How to clear badge counter on click of app icon in iphone?

From Dev

How to add a notification badge/count to application icon on Sony Xperia devices?

From Dev

how can i put badge icon within the app in menu bar?

From Dev

How to set badge icon when push notification is received

From Dev

Application icon badge is not displayed

From Dev

How to make RelativeSizeSpan align to top

From Dev

Align paper-icon-button to end in top-right of scaffold

From Dev

How to align icon to the left with text to the right?

From Dev

How to align text next to an icon with CSS?

From Java

How to vertically align text with icon font?

From Dev

How to vertically align a 'span' in a 'div' with icon present?

From Dev

How to vertically align an icon inside a span

From Dev

How to center align ion icon inside button?

From Dev

How to align material icon on right of a input field?

Related Related

  1. 1

    How to correctly align inline navpills with badge in bootstrap

  2. 2

    How to correctly align inline navpills with badge in bootstrap

  3. 3

    Display badge on top of bottom navigation bar's icon

  4. 4

    Android - how to add a badge count to an application icon?

  5. 5

    How to find out the Icon Badge count?

  6. 6

    How to reset the Badge app icon number?

  7. 7

    align icon on top of text inside button tag

  8. 8

    How to add badge on top of Font Awesome symbol?

  9. 9

    how to align submenu on top

  10. 10

    how to align the number in MarkerClusterer icon?

  11. 11

    how to align the number in MarkerClusterer icon?

  12. 12

    How to align an icon to the right of content

  13. 13

    How to vertically align icon font

  14. 14

    QPushButton: How to align icon and text

  15. 15

    How to add a notification badge/count to application icon on Sony Xperia devices?

  16. 16

    How to clear badge counter on click of app icon in iphone?

  17. 17

    How to add a notification badge/count to application icon on Sony Xperia devices?

  18. 18

    how can i put badge icon within the app in menu bar?

  19. 19

    How to set badge icon when push notification is received

  20. 20

    Application icon badge is not displayed

  21. 21

    How to make RelativeSizeSpan align to top

  22. 22

    Align paper-icon-button to end in top-right of scaffold

  23. 23

    How to align icon to the left with text to the right?

  24. 24

    How to align text next to an icon with CSS?

  25. 25

    How to vertically align text with icon font?

  26. 26

    How to vertically align a 'span' in a 'div' with icon present?

  27. 27

    How to vertically align an icon inside a span

  28. 28

    How to center align ion icon inside button?

  29. 29

    How to align material icon on right of a input field?

HotTag

Archive