Biểu tượng Font Awesome Icons như là biểu tượng Individual Node 2.1

[PVS]

Biểu tượng Font Awesome như là biểu tượng Individual Node 2.1

Đây là phiên bản up-to-date làm thế nào để sử dụng biểu tượng font-awesome như là biểu tượng node.

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

Khi bạn đã làm điều đó, bạn đã thực hiện gần như tất cả. 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à 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";
    }

Nếu bạn thực hiện một sai lầm chỉ cần phục hồi template và thử lại.

Tiếp theo là sẽ 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.

/* 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 */

Đối với các node bình thường sử dụng mã này và thay đổi 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 mã 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 và thay đổi giá trị "content" thành unicode của biểu tượng mà bạn muốn. (Bạn có thể tìm thấy điều này bằng cách nhấn vào biểu tượng)

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

Nguồn: xenforo.com​