How to display an icon to the add listing button only for mobile?

[aqmiami7]

Hi, I am trying to display a font awesome icon in the mobile for the add listings button only and not on the desktop add listing button. I tried this css but it doesnt seem to work. Any help would be appreciated. Thanks.

@media only screen and (max-width: 767px) {
  .hp-header__menu .hp-menu__item--listing-submit i::before {
    content: "\f0c9";
    font-family: FontAwesome;
    font-size: 1.2em;
    margin-right: 0.5em;
  }
}

[andrii]

Hi,

If I understand you correctly, please try this CSS snippet:

@media only screen and (max-width: 48em) { 
.header-navbar .hp-menu__item--listing-submit .fa-plus:before {
    content: "\f0c9";
    font-size: 1.2em;
    margin-right: 0.5em;
  }
}

Please note that it can require further customization.

[aqmiami7]

That worked perfect. Thanks!