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.
<ul id="nav-mobile" class="right hide-on-med-and-down">
<a href="#" class="nav-icons"><i class="material-icons" data-badge="4">info</i></a>
<a href="#" class="nav-icons"><i class="material-icons">email</i></a>
<a href="#" class="dropdown-button" data-activates="dropdown-user">
<img src="/images/personal.png" alt="Contact Person">
<i class="material-icons right">arrow_drop_down</i>
max-height: 60px !important;
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*.
*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.