XenForo 2.3.x Menü ve Alt Menüye İkon Ekle

[xenturka]

Xenforo 2.3.x versiyonlarında, nav menü ve alt menülere ikon ekleyin. Bunu yapmak için aşağıdaki verilen kodları extra.less isimli şablona ekleyebilirsiniz.

.p-navEl-link {
    &:before{
        font-size: 15px;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 5px;
        .m-faBase();
    }
    
    // ANA SAYFA MENÜSÜ
    &[data-nav-id="home"]:before{.m-faContent(@fa-var-duotone-home);}
    &[data-nav-id="forums"]:before{.m-faContent(@fa-var-duotone-comments);}
    &[data-nav-id="whatsNew"]:before{.m-faContent(@fa-var-duotone-bolt);}
    &[data-nav-id="xfrm"]:before{.m-faContent(@fa-var-duotone-cloud-download);}
    &[data-nav-id="members"]:before{.m-faContent(@fa-var-duotone-users);}
    &[data-nav-id="dbtechEcommerce"]:before{.m-faContent(@fa-var-duotone-shopping-cart);}
    &[data-nav-id="newPosts"]:before{.m-faContent(@fa-var-duotone-fire);}
    &[data-nav-id="findThreads"]:before{.m-faContent(@fa-var-duotone-comment);}
    &[data-nav-id="watched"]:before{.m-faContent(@fa-var-duotone-bell);}
    &[data-nav-id="searchForums"]:before{.m-faContent(@fa-var-duotone-search);}
    &[data-nav-id="markForumsRead"]:before{.m-faContent(@fa-var-duotone-eye-slash);}
    &[data-nav-id="history"]:before{.m-faContent(@fa-var-duotone-history);}
    &[data-nav-id="blog"]:before{.m-faContent(@fa-var-duotone-newspaper);}
    &[data-nav-id="digerMenu"]:before{content: '\f03a';}
    
    // NELER YENİ MENÜSÜ
    &[data-nav-id="featured"]:before{.m-faContent(@fa-var-duotone-stars);}
    &[data-nav-id="whatsNewPosts"]:before{.m-faContent(@fa-var-duotone-file-alt);}
    &[data-nav-id="xfmgWhatsNewNewMedia"]::before {.m-faIcon(@fa-var-duotone-image);}
    &[data-nav-id="xfmgWhatsNewMediaComments"]::before {.m-faIcon(@fa-var-duotone-comments);}
    &[data-nav-id="xfrmNewResources"]::before {.m-faIcon(@fa-var-duotone-download);}
    &[data-nav-id="dbtEcomNewProducts"]::before {.m-faIcon(@fa-var-duotone-shopping-cart);}
    &[data-nav-id="whatsNewProfilePosts"]:before{.m-faContent(@fa-var-duotone-pencil);}
    &[data-nav-id="whatsNewNewsFeed"]:before{.m-faContent(@fa-var-duotone-rss);}
    &[data-nav-id="latestActivity"]:before{.m-faContent(@fa-var-duotone-clock);}
    
    // KULLANICILAR MENÜSÜ
    &[data-nav-id="registeredMembers"]:before{.m-faContent(@fa-var-duotone-users);}
    &[data-nav-id="currentVisitors"]:before{.m-faContent(@fa-var-duotone-users);}
    &[data-nav-id="newProfilePosts"]:before{.m-faContent(@fa-var-duotone-pencil);}
    &[data-nav-id="searchProfilePosts"]:before{.m-faContent(@fa-var-duotone-comment-dots);}
    
    
    // Medya MENÜSÜ
    &[data-nav-id="xfmgNewMedia"]:before{.m-faContent(@fa-var-duotone-bolt);}
    &[data-nav-id="xfmgNewComments"]:before{.m-faContent(@fa-var-duotone-comment-alt-smile);}
    &[data-nav-id="xfmgAddMedia"]:before{.m-faContent(@fa-var-duotone-plus-square);}
    &[data-nav-id="xfmgYourContent"]:before{.m-faContent(@fa-var-duotone-file-image);}
    &[data-nav-id="xfmgWatchedContent"]:before{.m-faContent(@fa-var-duotone-bell);}
    &[data-nav-id="xfmgSearchMedia"]:before{.m-faContent(@fa-var-duotone-search);}
    &[data-nav-id="xfmgMarkViewed"]:before{.m-faContent(@fa-var-duotone-eye-slash);}
    
    // Kaynaklar MENÜSÜ
    &[data-nav-id="xfrmLatestReviews"]:before{.m-faContent(@fa-var-duotone-star);}
    &[data-nav-id="xfrmYourResources"]:before{.m-faContent(@fa-var-duotone-cloud-download);}
    &[data-nav-id="xfrmWatched"]:before{.m-faContent(@fa-var-duotone-bell);}
    &[data-nav-id="xfrmSearchResources"]:before{.m-faContent(@fa-var-duotone-search);}
    
    // Ürünler MENÜSÜ
    &[data-nav-id="dbtechEcommerceLatestReviews"]:before{.m-faContent(@fa-var-duotone-comments);}
    &[data-nav-id="dbtechEcommerceYourAccount"]:before{.m-faContent(@fa-var-duotone-id-card);}
    &[data-nav-id="dbtechEcommerceYourPurchasedLicenses"]:before{.m-faContent(@fa-var-duotone-file-certificate);}
    &[data-nav-id="dbtechEcommerceYourAddresses"]:before{.m-faContent(@fa-var-duotone-address-book);}
    &[data-nav-id="dbtechEcommerceYourCreatedProducts"]:before{.m-faContent(@fa-var-duotone-tag);}
    &[data-nav-id="dbtechEcommerceWatched"]:before{.m-faContent(@fa-var-duotone-bell);}
    &[data-nav-id="dbtechEcommerceSearchProducts"]:before{.m-faContent(@fa-var-duotone-search);}
 
}

Yeni bir menü eklediniz ve ona ikon eklemek için nav id adresini öğrenmeniz yeterlidir. Bunun için navigasyon yöneticinde ilgili menüye gelerek Navigasyon kimliği-ID kimliğinde bulunan id adını öğrenmeniz gerekmektedir.

Bu örnekte eklediğimiz menü id'si yeniMenu.



Bu menüye ikon eklemek için aşağıdaki şekildeki gibi kullanım sağlayabilirsiniz.

 &[data-nav-id="yeniMenu"]:before{.m-faContent(@fa-var-duotone-bars);}

Bu kodu eklediğimiz kodlar içinde // ANA SAYFA MENÜSÜ altında uygun bir yere ekleyin.