0

I'm trying to make a custom notification badge with CSS/SCSS. I want to insert content from html attribute (data-badge) as in the HTML code, but when I call it on the CSS it shows nothing.

HTML

<ul id="nav-mobile" class="right hide-on-med-and-down">
    <li>
        <a href="#" class="nav-icons"><i class="material-icons" data-badge="4">info</i></a>
    </li>
    <li>
        <a href="#" class="nav-icons"><i class="material-icons">email</i></a>
    </li>
    <li>
        <a href="#" class="dropdown-button" data-activates="dropdown-user">
            <div class="chip">
                <img src="/images/personal.png" alt="Contact Person">
                                Jane Doe
                                <i class="material-icons right">arrow_drop_down</i>
            </div>
        </a>
    </li>
</ul>

SCSS

a.nav-icons {
    max-height: 60px !important;
    i.material-icons {
    max-height: 60px;
    font-size: 2rem;
    line-height: 60px;
        &[data-badge] {
            content: attr(data-badge);
            position: relative;
            color: #fff;
                &::after {
                    content: attr(data-badge);
                    position: absolute;
                    background: red;
                    border-radius: 50%;
                    display: block;
                    padding: 0.3em;
                    color: black;
                    font-size: 12px;
                    max-height: 20px;
                    max-width: auto;
                    right: -10px;
                    top: 8px;
                  }
             }
        }
}

Or, please see this fiddle below.

https://jsfiddle.net/5gxudefb/3/

Thank you in advance

andhikaribrahim
  • 341
  • 6
  • 24
  • Your menu can not be opened, there isn't any **javascript** code? – Morteza QorbanAlizade Sep 04 '16 at 12:32
  • @MortezaQorbanAlizade Which menu? I've forgot to remove hide on mobile class, but i edited the fiddle. And there's actually nothing to do with javascript/sidebar menu/dropdown menu. I only need to know why is this content: attr(data-badge); doesn't work on the SCSS – andhikaribrahim Sep 04 '16 at 16:11
  • 1
    Related, partially, http://stackoverflow.com/questions/22735740/how-to-add-badge-on-top-of-font-awesome-symbol/22736017#22736017 – Paulie_D Sep 04 '16 at 16:34

1 Answers1

3

The issue is that the pseudo-element is inheriting the font-family of the icon which is, I believe, a ligature based icon-font.

This is why you can type the text "info" in the icon tag and get an icon to display rather than the text itself.

Since the data-badge is a number it has no equivalent in the Materialise font system and so nothing displays.

If you apply a font-family, say Verdana, to the pseudo-element ::after the number shows up*.

JSfiddle Demo

*Not where you expect but that would be another question I suspect

EDIT: The position of the text has been fixed...it was due to a 60px line-height being inherited too.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161