Rehber Xenforo Navigasyon Butonlarına İcon eklemek

Merhaba arkadaşlar. Bugün Xenforo forum yazılımında navigasyon kısmına simgeler eklemeyi anlatacağım. İlk olarak yapacağımız işlemi kısaca tanıtmak istiyorum. İşlemimizi uyguladıktan sonra aşağıdaki resimde gördüğünüz gibi forumunuzun navigasyonunda simgeler görünecek. Bunları nasıl ekleyeceğinizi ve nasıl değiştireceğinizi adım adım anlatacağım. İşlemler oldukça basittir, anladığınıza göre işlemlere geçiyorum. İlk olarak yönetici panelinize gitmelisiniz. Panelde, 'Görünüm ve Diller' kısmını bulun ve ardından 'Şablonlar'a gidin. Şablonlara ulaştıktan sonra, 'extra.less' adlı şablonu bulun ve açın.

// #### Navigasyon Simgeleri ####

.p-navEl a::before{
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
}

.p-navEl a[data-nav-id="home"]::before{content: "\f015";}
.p-navEl a[data-nav-id="forums"]::before{content: "\f086";}
.p-navEl a[data-nav-id="whatsNew"]::before{content: "\f0e7";}
.p-navEl a[data-nav-id="xfmg"]::before{content: "\f030";}
.p-navEl a[data-nav-id="xfrm"]::before{content: "\f019";}
.p-navEl a[data-nav-id="members"]::before{content: "\f0c0";}
.p-navEl a[data-nav-id="newPosts"]::before{content: "\f005";}
.p-navEl a[data-nav-id="findThreads"]::before{content: "\f00e";}
.p-navEl a[data-nav-id="watched"]::before{content: "\f06e";}
.p-navEl a[data-nav-id="searchForums"]::before{content: "\f002";}
.p-navEl a[data-nav-id="markForumsRead"]::before{content: "\f070";}
.p-navEl a[data-nav-id="xfrm"]::before{content: "\f0ed";}
.p-navEl a[data-nav-id="xa_ams"]::before{content: "\f1ea";}
.p-navEl a[data-nav-id="steamauth"]::before{content: "\f091";}
.p-navEl a[data-nav-id="nfTickets"]::before{content: "\f1cd";}

Sonra yukarıda gördüğünüz kodu bulunan yere yapıştırın ve ardından kaydedin. Bu adımları tamamladıktan sonra forumunuzu ziyaret edip sayfayı yenileyin. Eğer bazı simgeler eksikse, bunları eklemek oldukça basittir. İlk olarak eksik olan simgeleri belirleyin, örneğin Steam simgesi navigasyonda eksik. Daha sonra yönetici paneline gidin ve 'kurulumlar' kısmına ulaşın. Buraya geldikten sonra 'navigasyon yöneticisi'ne tıklayın. Bu bölüme girdikten sonra eksik simge olan Steam'i bulun. Bulduktan sonra üzerine tıklayın ve 'Navigasyon kimliği-ID' yazan kısımda bulunan yazıyı kopyalayın.

.p-navEl a[data-nav-id="NAVİGASYON ID"]::before{content: "\FONT AWSOME SİMGE";}

Kopyaladıktan sonra yukarıdaki kod parçacığında gördüğünüz 'navigasyon id' yazan kısma yapıştırın. Ardından son bir işlem kalıyor. Font Awesome websitesine gidin ve arama yerine örnek olarak verdiğimiz 'steam'ı yazın. Uygun simgeyi bulduktan sonra üzerine basın. Açılan pencerede, simgenin kodu yukarıda görüntülenir, örneğin 'f1b6'. Bu kodu kopyalayın ve yukarıdaki kod parçacığında 'font awesome simge' yazan yere yapıştırın. Ardından, extra.less şablonunuzda işe yaradığınız kod parçacığının hemen altına ekleyin ve işlemler tamamdır.

​

Şimdi ise mobilde gözükmesi için bir kaç adımı tamamlamalıyız. İlk olarak yönetici panelinize gitmelisiniz. Panelde, 'Görünüm ve Diller' kısmını bulun ve ardından 'Şablonlar'a gidin. Şablonlara ulaştıktan sonra, 'extra.less' adlı şablonu bulun ve açın. Açtıktan sonra benzer bir işlem yaptığımızı anlayacaksınız.

// #### Navigasyon Simgeleri Mobil ####

.offCanvasMenu-linkHolder a {
    &:before{
        font-size: 15px;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px;
        .m-faBase();
    }
    &[data-nav-id="home"]:before{
        content: "\f015";
    }
    &[data-nav-id="forums"]:before{
        content: "\f086";
    }
    &[data-nav-id="whatsNew"]:before{
        content: "\f0e7";
    }
    &[data-nav-id="xfmg"]:before{
        content: "\f030";
    }
    &[data-nav-id="xfrm"]:before{
        content: "\f019";
    }
    &[data-nav-id="members"]:before{
        content: "\f0c0";
    }
    &[data-nav-id="newPosts"]:before{
        content: "\f005";
    }
    &[data-nav-id="findThreads"]:before{
        content: "\f00e";
    }
    &[data-nav-id="watched"]:before{
        content: "\f06e";
    }
    &[data-nav-id="searchForums"]:before{
        content: "\f002";
    }
    &[data-nav-id="markForumsRead"]:before{
        content: "\f070";
    }
    &[data-nav-id="xfrm"]:before{
        content: "\f0ed";
    }
    &[data-nav-id="xa_ams"]:before{
        content: "\f1ea";
    }
    &[data-nav-id="steamauth"]:before{
        content: "\f091";
    }
    &[data-nav-id="nfTickets"]:before{
        content: "\f1cd";
    }
}

Yukarıdaki gördüğünüz kod parçacığını koyun. Ardından telefonunuzdan girip kontrol edebilirsiniz. Bütün işlemler tamamlanmıştır. aklınıza takılan veya yapamadığınız birşey olursa konu açıp sormaktan çekinmeyin.

 

[rizwfk]

Xenforo 2.3.0 Güncellemesinden sonra forum font awsome ayarlarında bir değişiklik oldu. Yeni kodları yakın zamanda ekleyeceğiz.

 

[rizwfk]

Merhaba, Xenforo 2.3.0 sürümü için navigasyon ikon kodlarını güncelledik. Xenforo'nun var olan Font Awesome etiket yapısı değiştiği için tüm kodlar güncellenmiştir. Yukarıdaki işlemleri aynısını yapın fakat 2.3.0 ve üstü bir sürüm iseniz lütfen aşağıdaki kodu kullanın.

// #### Navigasyon Simgeleri ####

.p-navEl a::before{
    font-family: 'Font Awesome 5 Pro';
    padding-right: 5px;
}

.p-navEl a[data-nav-id="home"]::before {
    .m-faBase();
    .m-faContent(@fa-var-home); /* "\f015" */
}

.p-navEl a[data-nav-id="forums"]::before {
    .m-faBase();
    .m-faContent(@fa-var-comments); /* "\f086" */
}

.p-navEl a[data-nav-id="whatsNew"]::before {
    .m-faBase();
    .m-faContent(@fa-var-bolt); /* "\f0e7" */
}

.p-navEl a[data-nav-id="xfmg"]::before {
    .m-faBase();
    .m-faContent(@fa-var-camera); /* "\f030" */
}

.p-navEl a[data-nav-id="xfrm"]::before {
    .m-faBase();
    .m-faContent(@fa-var-download); /* "\f019" */
}

.p-navEl a[data-nav-id="members"]::before {
    .m-faBase();
    .m-faContent(@fa-var-users); /* "\f0c0" */
}

.p-navEl a[data-nav-id="newPosts"]::before {
    .m-faBase();
    .m-faContent(@fa-var-star); /* "\f005" */
}

.p-navEl a[data-nav-id="findThreads"]::before {
    .m-faBase();
    .m-faContent(@fa-var-search); /* "\f00e" */
}

.p-navEl a[data-nav-id="watched"]::before {
    .m-faBase();
    .m-faContent(@fa-var-eye); /* "\f06e" */
}

.p-navEl a[data-nav-id="searchForums"]::before {
    .m-faBase();
    .m-faContent(@fa-var-search); /* "\f002" */
}

.p-navEl a[data-nav-id="markForumsRead"]::before {
    .m-faBase();
    .m-faContent(@fa-var-check); /* "\f070" */
}

.p-navEl a[data-nav-id="xfrm"]::before {
    .m-faBase();
    .m-faContent(@fa-var-download); /* "\f0ed" */
}

.p-navEl a[data-nav-id="xa_ams"]::before {
    .m-faBase();
    .m-faContent(@fa-var-newspaper); /* "\f1ea" */
}

.p-navEl a[data-nav-id="steamauth"]::before {
    .m-faBase();
    .m-faContent(@fa-var-steam); /* "\f091" */
}

.p-navEl a[data-nav-id="nfTickets"]::before {
    .m-faBase();
    .m-faContent(@fa-var-ticket); /* "\f1cd" */
}

Bu, mobil için güncellenmiş navigasyon simgeleridir. Lütfen eksiksiz bir şekilde uygulayın. Yukarıdaki yazıyı okuyarak nasıl değiştireceğinizi görebilirsiniz.

// #### Navigasyon Simgeleri Mobil ####

.offCanvasMenu-linkHolder a {
    &:before {
        font-size: 15px;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 3px;
        .m-faBase();
    }
    &[data-nav-id="home"]:before {
        .m-faContent(@fa-var-home); /* "\f015" */
    }
    &[data-nav-id="forums"]:before {
        .m-faContent(@fa-var-comments); /* "\f086" */
    }
    &[data-nav-id="whatsNew"]:before {
        .m-faContent(@fa-var-bolt); /* "\f0e7" */
    }
    &[data-nav-id="xfmg"]:before {
        .m-faContent(@fa-var-camera); /* "\f030" */
    }
    &[data-nav-id="xfrm"]:before {
        .m-faContent(@fa-var-download); /* "\f019" */
    }
    &[data-nav-id="members"]:before {
        .m-faContent(@fa-var-users); /* "\f0c0" */
    }
    &[data-nav-id="newPosts"]:before {
        .m-faContent(@fa-var-star); /* "\f005" */
    }
    &[data-nav-id="findThreads"]:before {
        .m-faContent(@fa-var-search); /* "\f00e" */
    }
    &[data-nav-id="watched"]:before {
        .m-faContent(@fa-var-eye); /* "\f06e" */
    }
    &[data-nav-id="searchForums"]:before {
        .m-faContent(@fa-var-search); /* "\f002" */
    }
    &[data-nav-id="markForumsRead"]:before {
        .m-faContent(@fa-var-check); /* "\f070" */
    }
    &[data-nav-id="xfrm"]:before {
        .m-faContent(@fa-var-download); /* "\f0ed" */
    }
    &[data-nav-id="xa_ams"]:before {
        .m-faContent(@fa-var-newspaper); /* "\f1ea" */
    }
    &[data-nav-id="steamauth"]:before {
        .m-faContent(@fa-var-steam); /* "\f091" */
    }
    &[data-nav-id="nfTickets"]:before {
        .m-faContent(@fa-var-ticket); /* "\f1cd" */
    }
}

aklınıza takılan veya aldığınız bir hata ile ilgili soruları çekinmeden sorabilirsiniz.

 

[rizwfk]

.p-navEl a[data-nav-id="NAVİGSYON ID"]::before {
    .m-faBase();
    .m-faContent(@fa-var- FONT AWSOME SİMGE); /* "\f015" */
}

Yukarıdaki kodu , istediğiniz id yi nasıl güncelleyecekleri konusunda kafa karışıklığı yaşayanlar için yardımcı olamk amacıyla koydum.