Font Awesome Icons như là Individual Node Icons 2.0

[PVS]

Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn

Font Awesome Icons như là Individual Node Icons 2.0

Đây là phiên bản up-to-date về cách sử dụng các biểu tượng font-awesome như biểu tượng node.

• Tải lên tất cả các tập tin vào thư mục diễn đàn của bạn.

Tiếp theo là đảm bảo rằng tất cả các biểu tượng node cũ của bạn đã mất.
Tìm trong node_list.css và sau đó xóa đoạn code sau:

.node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        @property "nodeIconForum";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: 0 0;
        @property "/nodeIconForum";
    }

    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        @property "nodeIconForumUnread";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -36px 0;
        @property "/nodeIconForumUnread";
    }

    .node .pageNodeInfo .nodeIcon
    {
        @property "nodeIconPage";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -72px 0;
        @property "/nodeIconPage";
    }

    .node .linkNodeInfo .nodeIcon
    {
        @property "nodeIconLink";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        background-position: -108px 0;
        @property "/nodeIconLink";
    }

Tiếp theo sẽ là EXTRA.css của bạn và thêm điều này tùy thuộc vào loại node bạn đang chỉnh sửa.

Thêm code dưới trước khi bạn làm bất cứ điều gì khác. Không xóa bất cứ điều gì khác nằm trong EXTRA.css chỉ cần thêm đoạn code sau vào phía dưới cùng của EXTRA.css

/* FONT AWESOME NODE ICONS */
@font-face
{
        font-family: 'FontAwesome';
        src: url('./styles/default/xenforo/fonts/fontawesome-webfont.eot');
        src: url('./styles/default/xenforo/fonts/fontawesome-webfont.ttf') format("truetype"),
                url('./styles/default/xenforo/fonts/fontawesome-webfont.woff') format('woff'),
                url('./styles/default/xenforo/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
                url('./styles/default/xenforo/fonts/fontawesome-webfont.svg#fontawesome-webfont') format('svg');
        font-style: normal;
        font-weight: normal;
}

.node.node_51 .forumNodeInfo .nodeIcon:after, .node.node_51 .categoryForumNodeInfo .nodeIcon:after
{
    font-family: "FontAwesome";
    font-size: 34px;
    content: "\f0e6";
    padding: 4px;
}

.node.node_51 .forumNodeInfo.unread .nodeIcon:after, .node.node_51 .categoryForumNodeInfo.unread .nodeIcon:after
{
    font-family: "FontAwesome";
    font-size: 34px;
    content: "\f0e6";
    padding: 4px;
}

/* FONT AWESOME NODE ICONS */

Bây giờ! Để có được thay đổi!

Đối với các node bình thường sử dụng đoạn code này và thay đổi các giá trị số trong cả hai phần .node đến node mà bạn muốn thay đổi. Điều này bao gồm các trang.

.node.node_51 .pageNodeInfo .nodeIcon:after
{
    font-family: "FontAwesome";
    font-size: 34px;
    content: "\f0e6";
    padding: 4px;
}

Đối với liên kết sử dụng code này:

.node.node_51 .linkNodeInfo .nodeIcon:after
{
    font-family: "FontAwesome";
    font-size: 34px;
    content: "\f0e6";
    padding: 4px;
}

Bạn có thể tìm thấy tất cả các biểu tượng ở Font Awesome Icons và thay đổi giá trị "nội dung" cho unicode của biểu tượng mà bạn muốn.

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

Nguồn: xenforo.com​