Tutorial 2x Biểu tượng Font Awesome 2.3 - danh mục, node, tiền tố, phrase, template, v.v. cho XenForo 2.3

[PVS]

Biểu tượng Font Awesome 2.3 - danh mục, node, tiền tố, phrase, template, v.v. cho XenForo 2.3


Có hai trường hợp chính mà bạn có thể sử dụng biểu tượng Font Awesome (hoặc các biểu tượng khác).

1 Phần tử Pseudo (trước hoặc sau văn bản)​

Trong trường hợp này, bạn chỉ định thông qua code CSS rằng một biểu tượng sẽ xuất hiện trước hoặc sau một số văn bản, ví dụ như tiêu đề node, tiền tố hoặc mục điều hướng. Điều này thường được thực hiện bằng cách thêm một số code CSS vào template extra.less.

Đối với các phần tử giả css (biểu tượng trước/sau văn bản), hãy sử dụng cú pháp này cho mã trong extra.less

.m-faIcon(@fa-var-icon-name); = regular

.m-faIcon(@fa-var-duotone-icon-name); =duotone

.m-faIcon(@fa-var-solid-icon-name); = solid

.m-faIcon(@fa-var-light-icon-name); = light

2 Trực tiếp trong một template​

Điều này xảy ra khi bạn chỉ hiển thị một biểu tượng trong một template hoặc html. Bạn sử dụng cú pháp này:

<xf:fa icon="fa-icon-name" aria-hidden="true">

Thêm biểu tượng node danh mục​

Trong template extra.less

Thay đổi số id cho phù hợp

// add icon to category id=4

.block--category.block--category4 .block-header:before
{
     .m-faIcon(@fa-var-sparkles);
}

Duotone

.block--category.block--category4 .block-header:before
{
      .m-faIcon(@fa-var-duotone-sparkles);
}

Solid

.block--category.block--category4 .block-header:before
{
      .m-faIcon(@fa-var-solid-sparkles);
}

Light

.block--category.block--category4 .block-header:before
{
      .m-faIcon(@fa-var-light-sparkles);
}

Lưu ý: Bạn có thể thêm các kiểu CSS khác như màu sắc, kích thước phông chữ, lề, v.v.

// add big red icon to category id=4

.block--category.block--category4 .block-header:before
{
      .m-faIcon(@fa-var-sparkles);
      color:red;
      font-size:36px;
}

Thay thế biểu tượng node mặc định​

(như trên có thể là biểu tượng thông thường, solid, light, hoặc duotone)

Để thay thế biểu tượng mặc định, hãy thêm vào template extra.less:

.node .node-icon i
{
    &:before
    {
        .m-faIcon(@fa-var-coffee-pot);
        width: 100%;
    }
    svg
    {
        display: none;
    }
}

Lưu ý rằng phần thứ hai (svg...) sẽ xóa biểu tượng xenForo mặc định.

Thay thế biểu tượng node riêng lẻ​

(lưu ý rằng bạn không cần phải xóa svg nếu đã thực hiện như trên cho tất cả các node)

Thay đổi số id cho phù hợp

.node.node--id8 .node-icon i
{
    &::before
    {
        .m-faIcon(@fa-var-bullhorn);
    }
    
     svg
    {
        display: none;
    }
 
}

Thêm biểu tượng vào tiền tố chủ đề​

ví dụ đối với tiền tố màu xanh lá cây nhạt (trong template extra.less):

Trước văn bản​

.label.label--lightGreen:before
{
.m-faIcon(@fa-var-flower-tulip); }

Sau văn bản​

.label.label--lightGreen:after {
        .m-faIcon(@fa-var-flower-daffodil);}

Cả trước và sau​

.label.label--lightGreen {
 
    &:before {
        .m-faIcon(@fa-var-flower-tulip);
 
    }
    &:after {
        .m-faIcon(@fa-var-flower-daffodil);
 
    }
}

Biểu tượng trong Điều hướng​

1 Thêm biểu tượng vào văn bản​

Đầu tiên hãy tìm ID điều hướng. Đây là văn bản ở trường trên cùng của cài đặt điều hướng trong Admin Control Panel của bạn.

ví dụ đối với tab Diễn đàn (id điều hướng = forums)

Thêm điều này vào extra.less

[data-nav-id="forums"]:before
{
    .m-faIcon(@fa-var-comments);
    margin-right:5px
}

Biểu tượng sau tiêu đề Nav​

[data-nav-id="forums"]:after
{
     .m-faIcon(@fa-var-comments);
     margin-left:5px;
}

2 Biểu tượng làm tiêu đề điều hướng thay vì văn bản, cũng dùng cho phrase.​

Các mục điều hướng dựa trên phrase, do đó đối với các mục điều hướng hiện có (mặc định là xenforo), bạn cần tìm phrase. Bạn có thể tìm thấy tất cả các phrase bằng cách tìm kiếm tiêu đề trong Admin Control Panel > Appearance > Search Phrases. Tất cả phrase điều hướng đều bắt đầu bằng nav. Do đó, chúng khá dễ tìm ngay cả khi có nhiều phrase tương tự nhau. ví dụ: Forums là phrase nav.forums . Bạn chỉ cần thay đổi phrase bằng cú pháp này:

{icon:far::icon-name}

ví dụ:

Regular
{icon:far::sparkles}

Solid
{icon:fas::sparkles}

Duotone
{icon:fad::sparkles}

Đối với biểu tượng có màu, hãy sử dụng span với kiểu inline:

<span style="color:yellow">{icon:far::sparkles}</span>

Đối với các mục điều hướng tùy chỉnh, bạn có thể thêm cùng một code trực tiếp vào cài đặt điều hướng trong trường Title.

Thêm biểu tượng vào template​

Thêm code này vào nơi bạn muốn biểu tượng xuất hiện trong template xenforo hoặc quảng cáo. Bạn có thể sử dụng nó hoàn toàn như một biểu tượng hoặc trong một liên kết.

Regular

<xf:fa icon="fa-sparkles" aria-hidden="true"/>

Solid (fas)

<xf:fa icon="fas fa-sparkles" aria-hidden="true"/>

Duotone (fad)

 <xf:fa icon="fad fa-sparkles" aria-hidden="true"/>

Light (fat)

<xf:fa icon="fal fa-sparkles" aria-hidden="true"/>

Biểu tượng có thể là một liên kết:

<a href="https://example.com/page"><xf:fa icon="fa-sparkles" aria-hidden="true"/></a>

Định dạng bằng màu sắc, kích thước, lề, v.v.

<xf:fa style="color:orange;font-size:22px;margin-left:5px;" icon="fad fa-palette" aria-hidden="true" />

Lưu ý rằng cũng như CSS inline (như trên style="..." ) bạn có thể thay thế định nghĩa một class để sử dụng trong CSS của mình (trong template extra.less)
<xf:fa class="your-class" icon="fad fa-sparkles" aria-hidden="true"/>

Chúc các bạn thành công.

Nguồn: xenforo.com​