Fontello вместо иконок разделов, страниц и ссылок

Совместимость с XenForo

Позаимствовано из стиля Cloud, только там используется

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

, а у меня, в принципе тоже, только генерировал на сервисе

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Скачиваем архив, распаковываем и заливаем папки css и fonts в корень сайта. Конечно можно в другое место, но я сделал так для удобства, если использовать другие шрифты или стили.
В шаблоне PAGE_CONTAINER перед </head>:
Код:
```
<link rel="stylesheet" type="text/css" media="all" href="css/animation.css">
<link rel="stylesheet" type="text/css" media="all" href="css/fontello.css">
<link rel="stylesheet" type="text/css" media="all" href="css/fontello-codes.css">
<link rel="stylesheet" type="text/css" media="all" href="css/fontello-embedded.css">
```
Если Вы будете использовать только то, что в этом ресурсе, то эти файлы можно не заливать и не вносить в шаблон, работать будет и без них. Но использование шрифта более обширно (здесь не буду останавливаться подробно), и в дальнейшем может пригодиться.

В шаблон EXTRA.css:

Код:

/* FONT FONTELLO NODE ICONS */
@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?33303145');
  src: url('../fonts/fontello.eot?33303145#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff?33303145') format('woff'),
       url('../fonts/fontello.ttf?33303145') format('truetype'),
       url('../fonts/fontello.svg?33303145#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

.node.node .forumNodeInfo .nodeIcon:after, .node.node .categoryForumNodeInfo .nodeIcon:after
{
    font-family: 'fontello';
    font-size: 34px;
    content: '\e859';
    color: @mutedTextColor;
    line-height: 35px;
    padding: 4px 5px 4px 0;
}

.node.node .forumNodeInfo.unread .nodeIcon:after, .node.node .categoryForumNodeInfo.unread .nodeIcon:after
{
    font-family: 'fontello';
    font-size: 34px;
    content: '\e859';
    line-height: 35px;
    color: @primaryLightish;
    padding: 4px;
    padding-right: 8px;
}

.node.node .pageNodeInfo .nodeIcon:after
{
    font-family: 'fontello';
    font-size: 34px;
    color: @primaryLightish;
    content: '\e867';
    line-height: 30px;
    padding: 4px 5px 4px 0;
}

.node.node .linkNodeInfo .nodeIcon:after
{
    font-family: 'fontello';
    font-size: 34px;
    color: @primaryLightish;
    content: '\e82f';
    line-height: 35px;
    padding: 4px 5px 4px 0;
}

/* FONT FONTELLO NODE ICONS */

Это обязательно в любом случае.

В шаблоне node_list.css, надо убрать кусок кода, что бы не отображались картинки node-sprite.png. Ищем:

Код:

    .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";
    }

Это будет между классами .node .nodeIcon и .node .nodeText. Может немного отличаться, в зависимости от шаблона.

Если Вы пожелаете использовать другие иконки, откройте в браузере demo.html, найдите нужную иконку, скопируйте название, откройте в текстовом редакторе (желательно Notepad) fontello.css и с помощью поиска найдите нужную иконку. Скопируйте отображение свойства content, типа '\e830' и замените в стиле.

Fontello вместо иконок разделов, страниц и ссылок 1.0

Другие ресурсы пользователя Skaiman

Поделиться ресурсом

Последние отзывы

Мы ценим вашу конфиденциальность