- Tham gia
- 28/02/2015
- Bài viết
- 16,829
- Được Like
- 12,690
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ìm trong node_list.css và sau đó xóa đoạn code sau:
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
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.
Đối với liên kết sử dụng code này:
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.
Đâ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.
Tìm trong node_list.css và sau đó xóa đoạn code sau:
Mã:
.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
Mã:
/* 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.
Mã:
.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:
Mã:
.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
Đính kèm
Bài viết liên quan
Được quan tâm