I’m modifying the kitchen sink project and trying to put a custom icon in the header with a badge.
I’ve tried using some of the .svg icons we used in JQM - nothing.
I then tried using fontawesome - Nothing.
I then tried adding a custom png to the img folder and creating a class - Nothing.
I can get JUST the badge to display (although its too small) but that’s about all.
Here’s what I’ve tried:
<div class="navbar navbar-large-transparent">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
<div class="title sliding">Framework7</div>
<div class="right">
<a href="/petey/" class="link icon-only">
<i icon="icon warning-yellow"><span class="badge color-red">5</span></i>
<!--
<span class="badge color-red">5</span>
<i class="fas fa-exclamation-triangle"></i>
<i class="fab fa-exclamation-triangle"></i>
<f7-icon icon="fab fa-accessible-icon"></f7-icon>
<i class="fab fa-warning">person_circle_fill<span class="badge color-red">5</span></i>
<i class="icon material-icons md-only">person<span class="badge color-red">5</span></i>
-->
</a>
<!--
<a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
<i class="icon f7-icons if-not-md">search</i>
<i class="icon material-icons md-only">search</i>
</a>
-->
</div>
<!--
<div class="title-large">
<div class="title-large-text">Framework7 - xxx</div>
</div>
<form data-search-container=".components-list" data-search-in="a" class="searchbar searchbar-expandable searchbar-components searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search components"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button if-not-aurora">Cancel</span>
</div>
</form>
-->
</div>
</div>
.warning-red {
background: url(../img/warning-red.png) no-repeat center;
background-size: cover;
height: 100px;
width: 100px;
}
.warning-yellow {
background: url(../img/warning-yellow.png) no-repeat center;
background-size: cover;
height: 100px;
width: 100px;
}