Заменяем иконки узлов на Font Awesome

[Hope]

Пользователь Hope разместил новый ресурс:

Заменяем иконки узлов на Font Awesome - Заменяем иконки узлов на Font Awesome.

Посмотреть вложение 33703
​

В шаблон EXTRA.css добавляем:

.nodeIcon::before {
    content: "\f085";
    font-family: FontAwesome;
    font-size: 36px;
    color: dodgerblue;
}

#forums.nodeList .node .nodeIcon {
    background-image: none;
}

Узнать больше об этом ресурсе...

 

[Time]

Только в определенных разделах можно изменить?

 

[Mirovinger]

Можно, чуть код подправить и будет для каждого узла (раздела), своя иконка.

Вот пример.

.node_2 .nodeIcon::before {
    content: "\f211";
    font-family: FontAwesome;
    font-size: 36px;
    color: dodgerblue;
}

.node_73 .nodeIcon::before {
    content: "\f219";
    font-family: FontAwesome;
    font-size: 36px;
    color: dodgerblue;
}

.node_6 .nodeIcon::before {
    content: "\f21e";
    font-family: FontAwesome;
    font-size: 36px;
    color: dodgerblue;
}

.nodeIcon::before {
    content: "\f085";
    font-family: FontAwesome;
    font-size: 36px;
    color: dodgerblue;
}

#forums.nodeList .node .nodeIcon {
    background-image: none;
}

Где .node_x(в примере 2, 73, 6), это Id нужного раздела.
Естественно заменяем на своё, и так дальше по аналогии.

 

[edgolo]

Созрел такой вопрос: как самому сделать иконку на подобии этих ?
PS: Просто нет такой иконки которая нужна.

 

[Skaiman]

Созрел такой вопрос: как самому сделать иконку на подобии этих ?
PS: Просто нет такой иконки которая нужна.

Сделать свой шрифт или воспользоваться другими имеющимися сервисами, например

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

,

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

,

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

 

[MC_Mike]

А к категории как иконку добавить?

 

[Volna]

А к подразделу?:rolleyes:

 

[MC_Mike]

Volna, к подразделу точно так же

 

[ProfSenja]

Вариант с активным и неактивным разделом

.nodeIcon::before {
  content: "\f1d9";
  font-family: FontAwesome;
  font-size: 30px;
  color: grey;
}
.forumNodeInfo.unread .nodeIcon::before {
  content: "\f1d8";
  font-family: FontAwesome;
  font-size: 30px;
  color: dodgerblue;
}

#forums.nodeList .node .nodeIcon {
  background-image: none;
}

Если на форуме включена опция - Создавать страницы для категорий, то добавить к выше указанному коду этот:

.nodeList .node .forumNodeInfo .nodeIcon {
    background-image: none;
}
.nodeList .node .forumNodeInfo.unread .nodeIcon {
    background-image: none;
}

 

[nasa]

А может лучше не в extra.css, а в какой нибудь другой который не будет подгружаться на тех страницах где нету узлов? А то если скажем 1000 узлов c иконками, это лишние килобайты в css

Как то ниже иконка получается чем надо. Как по выше подвинуть, она не по центру блока как дефолтные...

 

[Skaiman]

А может лучше не в extra.css, а в какой нибудь другой который не будет подгружаться на тех страницах где нету узлов? А то если скажем 1000 узлов c иконками, это лишние килобайты в css

Как они будут подгружаться если их нет на тех страницах, в смысле иконок.

Как то ниже иконка получается чем надо. Как по выше подвинуть, она не по центру блока как дефолтные...

margin или line-height

 

[nasa]

Как они будут подгружаться если их нет на тех страницах, в смысле иконок.

margin или line-height

Я имел ввиду что extra.css вырастит если прописать к 1000 узлам иконки, и этот css будет подгружаться даже на тех страницах где нету узлов. И чтото мне подсказывает что должен быть в ксенфоро такой css который только на странице узлов подгружается.

 

[Skaiman]

Font Awesome это шрифт, ты же не паришься из за 10000 знаков на странице, а там всего 1000 :) Короче не внушай себе всякую ерунду, ну если и будет подгружаться css, то только к тем элементам которые есть на странице. Нет подключения отдельного, ну если только в шаблоне подключать, но все это ерунда, не парься, не параной.

 

[niko22]

Вариант с активным и неактивным разделом

.nodeIcon::before {
  content: "\f1d9";
  font-family: FontAwesome;
  font-size: 30px;
  color: grey;
}
.forumNodeInfo.unread .nodeIcon::before {
  content: "\f1d8";
  font-family: FontAwesome;
  font-size: 30px;
  color: dodgerblue;
}

#forums.nodeList .node .nodeIcon {
  background-image: none;
}

Если на форуме включена опция - Создавать страницы для категорий, то добавить к выше указанному коду этот:

.nodeList .node .forumNodeInfo .nodeIcon {
    background-image: none;
}
.nodeList .node .forumNodeInfo.unread .nodeIcon {
    background-image: none;
}

А как-бы еще сделать чтобы картинка была активной? то есть прописать к картинке ссылку?