Buy me a coffee

Add custom icon before Navigation Item

Suppose you want to add icons before these items


Just add this code to the Custom CSS box.
Replace Pixabay with your icon URL.

/* do not delete this code */
nav>div.header-nav-item>a:before, [data-folder="root"]>div>div>div a:before {
    content: "";
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    display: inline-block;
    width: 30px;
    height: 30px;
/* end - do not delete this code */

/* item 1 */
nav>div.header-nav-item:nth-child(1)>a:before, [data-folder="root"]>div>div>div:nth-child(1) a:before {
    background-image: url(;
/* item 2 */
nav>div.header-nav-item:nth-child(2)>a:before, [data-folder="root"]>div>div>div:nth-child(2) a:before {
    background-image: url(;
/* item 3 */
nav>div.header-nav-item:nth-child(3)>a:before, [data-folder="root"]>div>div>div:nth-child(3) a:before {
    background-image: url(;
/* item 4 */
nav>div.header-nav-item:nth-child(4)>a:before, [data-folder="root"]>div>div>div:nth-child(4) a:before {
    background-image: url(;
/* item 5 */
nav>div.header-nav-item:nth-child(5)>a:before, [data-folder="root"]>div>div>div:nth-child(5) a:before {
    background-image: url(;

And you will have a result like this


Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to:
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder