В этом руководстве будет показано, как использовать FontAwesome в качестве добавления индивидуальных иконок для узлов.
1. Скачиваем zip архив с FontAwesomeFonts, распаковываем и загружаем содержимое архива в корневой каталог форума на FTP.
2. Открываем шаблон node_list.css и удаляем следующий код:
Примечание: Не удаляйте код для значков(иконок) страниц и ссылок в узлах, если вы хотите заменить только иконки узлов. Удаляйте только тот код, для чего вы хотите изменить иконки(иконок узлов(nodeIconForum; nodeIconForumUnread); иконок страниц в узлах(nodeIconPage); иконок ссылок в узлах(nodeIconLink) ).
3. Открываем EXTRA.css и добавляем следующий код:
Заменить "51" на ваш ID узла. Вы также можете добавлять / изменять CSS в соответствии с вашими потребностями.
Кроме того, "/ f0e6" это код CSS для Font Awesome Icons. Перейдите по ссылке в верхней части этого ресурс, чтобы посмотреть коды для всех значков.
Соответственно, для каждого узла добавляем изменённый код:
И далее по аналогии, так же и для страниц и ссылок.
Вот CSS для иконок страницы и ссылки узла.
Страница:
Ссылка:
Итак, вот все, что нужно для добавления отдельных иконк для узлов.
1. Скачиваем zip архив с FontAwesomeFonts, распаковываем и загружаем содержимое архива в корневой каталог форума на FTP.
2. Открываем шаблон node_list.css и удаляем следующий код:
Примечание: Не удаляйте код для значков(иконок) страниц и ссылок в узлах, если вы хотите заменить только иконки узлов. Удаляйте только тот код, для чего вы хотите изменить иконки(иконок узлов(nodeIconForum; nodeIconForumUnread); иконок страниц в узлах(nodeIconPage); иконок ссылок в узлах(nodeIconLink) ).
Код:
.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";
}3. Открываем 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 */Кроме того, "/ f0e6" это код CSS для Font Awesome Icons. Перейдите по ссылке в верхней части этого ресурс, чтобы посмотреть коды для всех значков.
Соответственно, для каждого узла добавляем изменённый код:
Код:
.node.node_16 .forumNodeInfo .nodeIcon:after, .node.node_16 .categoryForumNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f086";
padding: 4px;
}
.node.node_16 .forumNodeInfo.unread .nodeIcon:after, .node.node_16 .categoryForumNodeInfo.unread .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f086";
padding: 4px;
}И далее по аналогии, так же и для страниц и ссылок.
Вот CSS для иконок страницы и ссылки узла.
Страница:
Код:
.node.node_51 .pageNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}
Код:
.node.node_51 .linkNodeInfo .nodeIcon:after
{
font-family: "FontAwesome";
font-size: 34px;
content: "\f0e6";
padding: 4px;
}Итак, вот все, что нужно для добавления отдельных иконк для узлов.
