Custom icon in header with badge

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>
    <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 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>
    <div class="title-large">
      <div class="title-large-text">Framework7 - xxx</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>
        <span class="searchbar-disable-button if-not-aurora">Cancel</span>

.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;

I believe, you’ve tried to add your custom icon with this HTML.

< i icon=“icon warning-yellow”>< span class=“badge color-red”>5< /span>< /i>

If so, you should change the: <i icon=yourClass to <i class= yourClass
Other than that, you should be good to go.

1 Like

There is no “icon” attribute in HTML. We still missing a lot of context.

Did you include fontawesome to the project?

To what folder and what styles? We can’t help here as we don’t see the your project structure

@NathanHarold - Sorry, I had fixed that typo already but forgot to fix it before posting.

@nolimits4web - Yes, fontawesome is included in the header and there are no errors on missing resources or anything like that. As for project structure, I’m simply modifying (experimenting really) with the kitchen sink project.

The answer was to reduce the size of the icon in the .warning-red and .warning-yellow classes from 100px x 100px to 25px x 25px. This solves the immediate problem but still didn’t solve the font-awesome issue.

Do you get any error on the console regarding Font Awesome?
It’s hard to say something without seeing some code and your folder structure.

I had a similar problem using f7-icons and fa svg icons. Because of how fa svg works. It broke f7 icons. So I end up using fa css icons. Maybe this solve you problem

I don’t have the f7-icons installed. I was just trying to use the fa icons and like I showed in the original post, nothing I tried worked.

Right now, I have one icon working and that icon was generated from a .png file loaded into the /img folder and load that image via a css class.