Как подключать иконки FontAwesome в XenForo 2.3

[baltun]

Покажем на примере в Xenforo 2.2 было все так:

.p-sectionLinks .p-sectionLinks-list .p-navEl a.p-navEl-link[href*="/whats-new/posts/"]:before {
    content: "\f005";
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 90%;
    padding-right: 2px;
}

В XenForo 2.3 и видимо в XenForo 3.0 будет так:

.p-sectionLinks .p-sectionLinks-list .p-navEl a.p-navEl-link[href*="/whats-new/posts/"]:before {
    .m-faContent(@fa-var-star);
    font-size: 90%;
    padding-right: 2px;
}

Еще один вариант вывода иконок:

<i class="far fa-times-circle" data-xf-init="icon"></i>

 

[hacker]

[MMO] Navigation tab icons оно же работает на 2.3

Как бы еще их анимировать? Пытался не смог.

.node-extra-title:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-reply);
    padding-right: 4px;
    display: inline-block;
    font-weight: 400;
}
.node-extra-date:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-clock);
    padding-right: 4px;
    display: inline-block;
    font-weight: 400;
}
.node-extra-user .username:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-user);
    padding-right: 4px;
    padding-left: 1px;
    display: inline-block;
    font-weight: 400;
}


.structItem-minor .username:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-user);
    padding-right: 4px;
    padding-left: 1px;
}
.structItem-parts .structItem-startDate:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-clock);
    padding-right: 4px;
    padding-left: 1px;
}
.structItem-latestDate:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-clock);
    padding-right: 4px;
    padding-left: 1px;
}
.structItem-minor .username:before {
    .m-faBase();
    .m-faContent(@fa-var-duotone-user);
    padding-right: 4px;
    padding-left: 1px;
}

-duotone можно удалить или добавить предпочтительный стиль значков.




Примеры приведены в таблице ниже:

Тип	Код
Шаблоны / модификации шаблонов	HTML: <xf:fa icon="fas fa-comments" />
Less шаблоны	less: .m-faIcon(@fa-var-solid-comments);
JavaScript	JavaScript: XF.Icon.getIcon('solid', 'fa-comments')
Фразы	Код: {icon:fas::comments}

 

[Elon Reeve]

Покажем на примере в Xenforo 2.2 было все так:

.p-sectionLinks .p-sectionLinks-list .p-navEl a.p-navEl-link[href*="/whats-new/posts/"]:before {
    content: "\f005";
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 90%;
    padding-right: 2px;
}

В XenForo 2.3 и видимо в XenForo 3.0 будет так:

.p-sectionLinks .p-sectionLinks-list .p-navEl a.p-navEl-link[href*="/whats-new/posts/"]:before {
    .m-faContent(@fa-var-star);
    font-size: 90%;
    padding-right: 2px;
}

Еще один вариант вывода иконок:

<i class="far fa-times-circle" data-xf-init="icon"></i>

Если говорить о стандартном шаблоне то можно вот так

.p-navEl-link, .menu-linkRow, .offCanvasMenu-link {
    &:before {
        .m-faBase();
        display: inline-block;
        margin-right: 5px;
    }
    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-bolt);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
                                   и тд..
}

а меню пользователя можно вот так

.menu--account {
    .tabs-tab {
        &:before {
            .m-faBase();
            padding-right:3px;
            margin-left: -5px;
        }
        
        &[href$="/bookmarks"] {
            .m-faBefore(@fa-var-bookmark);
        }

        &[href$="account/"] {
            .m-faBefore(@fa-var-user);
        }   
    }

.menu-linkRow {
        padding: 6px 8px;

        &:before {
            .m-faBase();
            padding-right: 3px;
            font-size: 12px;
        }
        
        
        &[href*="whats-new/news-feed"] {
            .m-faBefore(@fa-var-rss);
        }       

        &[href*="search/member"] {
            .m-faBefore(@fa-var-comment);
        }

        &[href$="account/reactions"] {
            .m-faBefore(@fa-var-thumbs-up);
        }

        &[href$="account/account-details"] {
            .m-faBefore(@fa-var-user-cog);
        }

        &[href$="account/security"] {
            .m-faBefore(@fa-var-shield-alt);
        }
                           и тд...   
    }
}

 

[hacker]

@DetectorDevil, Ну у вас шаблоны, а нас стили )))

 

[Elon Reeve]

@DetectorDevil, Ну у вас шаблоны, а нас стили )))

Не вижу разницу между шаблоном и стилем )

 

[hacker]

Ага, ну тогда я пойду лесом, только вы в стилях как и в шаблонах не заблудитесь ))) Стиль один а в нем шаблонов много!

/*************************** Анимация при наведении курсора на FA */
.label.label:hover:before {
  display:inline-block;
  -webkit-animation-name: flash;
  animation-name: flash;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes flash {
  0%, 50%, 100% {
  opacity: 1;
  }

  25%, 75% {
  opacity: 0;
  }
}
/******************************************************************/