Xenforo 1 Font Awesome Navbar İkonları

MeliL · 9 Haz 2018

Alıntıdır.!!!

Uyumlu XF versiyonları: 1.0, 1.1, 1.2, 1.3, 1.4, 1.5

1.Adım
ACP> Görünüm> Stiller>kullandığınız tema>Şablonlar Bölümünden PAGE_CONTAINER adlı şablonu açıyoruz ve aşağıdaki kodu aratıyoruz

Kod:

<head>

Hemen altına aşağıdaki kodu ekliyoruz.

Kod:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

2.Adım
ACP> Görünüm> Stiller>kullandığınız tema>Şablonlar Bölümünden EXTRA.css adlı şablonu açıyoruz ve aşağıdaki kodları ekliyoruz

Kod:

/************************************************************************/

/*=Font Awesome Icon: Forums=*/
.navTabs .navTab.forums .navLink:before
{
    display: block !important;
    font-family: FontAwesome;
    position: absolute;
    top: 0 px;
    left: 5px;
/*--icon to display--*/
    content: "\f03a";
/*--icon color--*/
    color: #FFF;
/*--icon size--*/
    font-size: 17px;
}
/*--icon color if tab is selected--*/
   .navTabs .navTab.forums.selected .navLink:before {color: #FFF;}
/*--icon color if mouse is hovered--*/
   .navTabs .navTab.forums:hover .navLink:before {color: #FFF;}
/*--adjust the px relative to the icon size--*/
   .navTabs .navTab.forums .navLink  { padding-left: 28px; }
  
/*=Font Awesome Icon: Showcase=*/
.navTabs .navTab.showcase .navLink:before
{
    display: block !important;
    content: "\f0f6";
    font-family: FontAwesome;
/*--adjust as necessary--*/
    color: #FFF;
    font-size: 17px;
    position: absolute;
    left: 5px;
}
   .navTabs .navTab.showcase.selected .navLink:before {color: #FFF;}
   .navTabs .navTab.showcase:hover .navLink:before {color: #FFF;}
   .navTabs .navTab.showcase .navLink  { padding-left: 25px; }
  
/*=Font Awesome Icon: XenGallery=*/
.navTabs .navTab.xengallery .navLink:before
{
    display: block !important;
    content: "\f03e";
    font-family: FontAwesome;
/*--adjust as necessary--*/
    color: #FFF;
    font-size: 17px;
    position: absolute;
    left: 5px;
}
   .navTabs .navTab.xengallery.selected .navLink:before {color: #FFF;}
   .navTabs .navTab.xengallery:hover .navLink:before {color: #FFF;}
   .navTabs .navTab.xengallery .navLink  { padding-left: 30px; }

/*=Font Awesome Icon: TaigaChat Pro=*/
.navTabs .navTab.taigachat .navLink:before
{
    display: block !important;
    content: "\f086";
    font-family: FontAwesome;
/*--adjust as necessary--*/
    color: #FFF;
    font-size: 17px;
    position: absolute;
    left: 5px;
}
   .navTabs .navTab.taigachat.selected .navLink:before {color: #FFF;}
   .navTabs .navTab.taigachat:hover .navLink:before {color: #FFF;}
   .navTabs .navTab.taigachat .navLink  { padding-left: 28px; }
  
/*=Font Awesome Icon: Donation Manager=*/
.navTabs .navTab.donations .navLink:before
{
    display: block !important;
    content: "\f153";
    font-family: FontAwesome;
/*--adjust as necessary--*/
    color: #FFF;
    font-size: 17px;
    position: absolute;
    left: 5px;
}
   .navTabs .navTab.donations.selected .navLink:before {color: #FFF;}
   .navTabs .navTab.donations:hover .navLink:before {color: #FFF;}
   .navTabs .navTab.donations .navLink  { padding-left: 21px; }

/*=Font Awesome Icon: Memberlist=*/
.navTabs .navTab.members .navLink:before
{
    display: block !important;
    content: "\f0c0";
    font-family: FontAwesome;
/*--adjust as necessary--*/
    color: #FFF;
    font-size: 17px;
    position: absolute;
    left: 0px;
}
   .navTabs .navTab.members.selected .navLink:before {color: #FFF;}
   .navTabs .navTab.members:hover .navLink:before {color: #FFF;}
   .navTabs .navTab.members .navLink  { padding-left: 25px; }


/*=Font Awesome Icon: resources=*/
.navTabs .navTab.resources .navLink:before
{
    display: block !important;
    content: "\f019";
    font-family: FontAwesome;
/*--adjust as necessary--*/
    color: #FFF;
    font-size: 17px;
    position: absolute;
    left: 0px;
}
   .navTabs .navTab.resources.selected .navLink:before {color: #FFF;}
   .navTabs .navTab.resources:hover .navLink:before {color: #FFF;}
   .navTabs .navTab.resources .navLink  { padding-left: 25px; }
  
/*=Font Awesome Icon: help=*/
.navTabs .navTab.help .navLink:before
{
    display: block !important;
    content: "\f128";
    font-family: FontAwesome;
/*--adjust as necessary--*/
    color: #FFF;
    font-size: 17px;
    position: absolute;
    left: 0px;
}
   .navTabs .navTab.help.selected .navLink:before {color: #FFF;}
   .navTabs .navTab.help:hover .navLink:before {color: #FFF;}
   .navTabs .navTab.help .navLink  { padding-left: 25px; }

Navbar-ikonlari-fontawesome-once - xenforo_web_tr.png

Navbar-ikonlari-fontawesome-sonra - xenforo_web_tr.png

ExQing · 9 Haz 2018

Güzel ama gözüme değişik geliyor alışmadığım için heralde. böyle değişik şeyler paylaşmaya devam et

MeliL · 9 Haz 2018

ExQing' Alıntı:
Güzel ama gözüme değişik geliyor alışmadığım için heralde. böyle değişik şeyler paylaşmaya devam et

Teşekkürler Paylaşacağım

.

Ara

Xenforo 1 Font Awesome Navbar İkonları

MeliL

☕Grapher ツ

ExQing

● вιя єƒѕαηє ●

MeliL

☕Grapher ツ

Benzer Konular