Подключение иконок в стиле Material Icons и MyBB техподдержки на css

Страница: 1

Сообщений 1 страница 8 из 8

Перевести Поделиться1Чт, 8 Янв 2026 18:03:23

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7608
Уважение: +6156
Позитив: +6698
Пол: Мужской
Последний визит:
Вчера 19:07:44

Почему то подключение иконок в стиле Material Icons и MyBB техподдержки для бб-панели везде только при помощи скриптов. Любые скрипты здесь лишние.

Подключение только Material Icons:

Подключение только Material Icons

Код:

<!-- Иконки Material Icons в бб-панели вместо картинок -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/36187.css">
<style>
/* ===============================
   Настройки кнопок
   =============================== */

/* ===== Дополнительные кнопки ===== */

#button-image2::before      { content: '\e3d3'; } /* collections */
#button-indent::before      { content: '\e23e'; } /* format_indent_increase */

/* ===== Размер шрифта, Размер кнопок, Расположение, Цвета кнопок и HOVER эффект ===== */
   
#form-buttons tr {
  text-align: center;
}

#form-buttons td {
  width: 24px;
  height: 24px;
  margin: 0 5px 5px;
  border-radius: 5px;
}

#form-buttons td img {height: 24px;}

#form-buttons td::before {
  width: 24px;
  height: 24px;
  text-align: center;
  font-size: 22px;
  line-height: 24px;
  color: #56615c;
}

#form-buttons td:hover::before {
  color: #6d6851;
}
</style>

Это подключение своих кнопок:

/* ===== Дополнительные кнопки ===== */

#button-image2::before { content: '\e3d3'; } /* collections */
#button-indent::before { content: '\e23e'; } /* format_indent_increase */

Подключение только MyBB Icons от техподдержки:

Подключение только MyBB Icons от техподдержки

Код:

<!-- Иконки MyBB Icons в бб-панели вместо картинок -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/54994.css">
<style>
/* ===============================
   Настройки кнопок
   =============================== */

/* ===== Размер шрифта, Размер кнопок, Расположение, Цвета кнопок и HOVER зффект ===== */
   
#form-buttons tr {
  text-align: center;
}

#form-buttons td {
  width: 24px;
  height: 24px;
  margin: 0 5px 5px;
  border-radius: 5px;
}

#form-buttons td img {height: 24px;}

#form-buttons td::before {
  width: 24px;
  height: 24px;
  text-align: center;
  font-size: 22px;
  line-height: 24px;
  color: #56615c;
}

#form-buttons td:hover::before {
  color: #6d6851;
}
</style>

Подключение MyBB Icons от техподдержки + дополнительные иконки Material Icons:

Подключение MyBB Icons от техподдержки + дополнительные иконки Material Icons

Код:

<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/54994.css">
<style>
/* ===============================
   Настройки кнопок
   =============================== */

/* ===== Загрузка Material Icons (PUA) ===== */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://forumstatic.ru/files/001a/ad/c5/56520.woff2)
       format('woff2');
}

/* ===== Подключение Material Icons для дополнительных кнопок ===== */

#button-image2::before, #button-indent::before {
  font-family: 'Material Icons';
  font-weight: 400;
  font-style: normal;
}

/* ===== Дополнительные кнопки ===== */

#button-image2::before      { content: '\e3d3'; } /* collections */
#button-indent::before      { content: '\e23e'; } /* format_indent_increase */

/* ===== Размер шрифта, Размер кнопок, Расположение, Цвета кнопок и HOVER зффект ===== */
   
#form-buttons tr {
  text-align: center;
}

#form-buttons td {
  width: 24px;
  height: 24px;
  margin: 0 5px 5px;
  border-radius: 5px;
}

#form-buttons td img {height: 24px;}

#form-buttons td::before {
  width: 24px;
  height: 24px;
  text-align: center;
  font-size: 22px;
  line-height: 24px;
  color: #56615c;
}

#form-buttons td:hover::before {
  color: #6d6851;
}
</style>
Это подключаем Material Icons и использование для дополнительных кнопок:
/* ===== Загрузка Material Icons (PUA) ===== */

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://forumstatic.ru/files/001a/ad/c5/56520.woff2)
format('woff2');
}

/* ===== Подключение Material Icons для дополнительных кнопок ===== */

#button-image2::before, #button-indent::before {
font-family: 'Material Icons';
font-weight: 400;
font-style: normal;
}

Это подключаем дополнительные кнопки:
/* ===== Дополнительные кнопки ===== */

#button-image2::before { content: '\e3d3'; } /* collections */
#button-indent::before { content: '\e23e'; } /* format_indent_increase */

Material Icons - это старые Гугловские иконки, более новые не подключить, во всяком случае простым способом через CSS. Движок форума, похоже, не поддерживает более новый вариант. Сам шрифт иконок я скачал и залил на Майбб. Если кто хочет можно использовать гугловский напрямую: https://fonts.gstatic.com/s/materialico … DsNc.woff2

Для поиска кодов иконок можно использовать вот этот сервис: https://fontdrop.info/

Подключение своего пака иконок:

Подключение своего пака иконок

Код:

/* ===============================
   Загрузка Пак Icons (PUA). Формат .woff2. Custom Icons - ваше название шрифта иконок.
   =============================== */

@font-face {
  font-family: 'Custom Icons';
  font-style: normal;
  font-weight: 400;
  src: url(ваша ссылка в формате .woff2)
       format('woff2');
}

/* ===============================
   Базовая разметка панели
   =============================== */

#form-buttons tr {
  display: block;
  width: 100%;
}

#form-buttons td {
  position: relative;
  display: inline-block;
  background: none !important;
}

#form-buttons td img {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;              /* скрываем blank.gif */
  cursor: pointer;
}

#form-buttons td::before {
  display: block;
  position: absolute;
  left: 0;
  top: 0;

  pointer-events: none;
}

/* ===============================
   Подключение Custom Icons - ваше название шрифта иконок
   =============================== */

#form-buttons td::before {
  font-family: 'Custom Icons';
  font-weight: 400;
  font-style: normal;
}

/* ===============================
   Шрифт / размер
   =============================== */

#button-font::before        { content: 'Ваш код в виде: \e167'; } /* Шрифт */
#button-size::before        { content: 'Ваш код в виде: \e167'; } /* Размер */

/* ===============================      
   Форматирование текста                
   =============================== */   

#button-bold::before        { content: 'Ваш код в виде: \e167'; } /* Жирный */
#button-italic::before      { content: 'Ваш код в виде: \e167'; } /* Курсив */
#button-underline::before   { content: 'Ваш код в виде: \e167'; } /* Подчеркивание */
#button-strike::before      { content: 'Ваш код в виде: \e167'; } /* Зачеркнутый */

/* ===============================      
   Выравнивание                         
   =============================== */   

#button-left::before        { content: 'Ваш код в виде: \e167'; } /* Выравнивание по левому краю */
#button-center::before      { content: 'Ваш код в виде: \e167'; } /* Выравнивание по центру */
#button-right::before       { content: 'Ваш код в виде: \e167'; } /* Выравнивание по правому краю */

/* ===============================      
   Ссылки и медиа                       
   =============================== */   

#button-link::before        { content: 'Ваш код в виде: \e167'; } /* Ссылка */
#button-image::before       { content: 'Ваш код в виде: \e167'; } /* Загрузка изображений */
#button-video::before       { content: 'Ваш код в виде: \e167'; } /* Загрузка видео */

/* ===============================      
   Спец-блоки                           
   =============================== */   

#button-spoiler::before     { content: 'Ваш код в виде: \e167'; } /* Спойлер */
#button-hide::before        { content: 'Ваш код в виде: \e167'; } /* Скрытый текст */
#button-quote::before       { content: 'Ваш код в виде: \e167'; } /* Цитата */
#button-code::before        { content: 'Ваш код в виде: \e167'; } /* Код */
#button-table::before       { content: 'Ваш код в виде: \e167'; } /* Таблица */

/* ===============================      
   Цвет / смайлы / прочее               
   =============================== */   

#button-color::before       { content: 'Ваш код в виде: \e167'; } /* Цвет */
#button-smile::before       { content: 'Ваш код в виде: \e167'; } /* Смайлики */
#button-keyboard::before    { content: 'Ваш код в виде: \e167'; } /* Виртуальная клавиатура */
#button-addition::before    { content: 'Ваш код в виде: \e167'; } /* Дополнительно */


/* ===== Дополнительные кнопки ===== */

#button-add1::before      { content: 'Ваш код в виде: \e167'; } /* Ваша дополнительная кнопка 1 */
#button-add2::before      { content: 'Ааш код в виде: \e167'; } /* Ваша дополнительная кнопка 2 */

/* ===============================
   Настройки кнопок
   =============================== */

/* ===== Размер шрифта, Размер кнопок, Расположение, Цвета кнопок и HOVER зффект ===== */
   
#form-buttons tr {
  text-align: center;
}

#form-buttons td {
  width: 24px;
  height: 24px;
  margin: 0 5px 5px;
  border-radius: 5px;
}

#form-buttons td img {height: 24px;}

#form-buttons td::before {
  width: 24px;
  height: 24px;
  text-align: center;
  font-size: 22px;
  line-height: 24px;
  color: #56615c;
  filter: drop-shadow(0 0 0.8px #000);
}

#form-buttons td:hover::before {
  color: #6d6851;
}

Перевести Поделиться2Чт, 8 Янв 2026 23:40:31

Автор: Arakhen
Inner Party System
Зарегистрирован: Ср, 10 Май 2017
Сообщений: 591
Уважение: +543
Позитив: +527
Последний визит:
Вчера 22:27:45

kolobdur74 написал(а):

везде только при помощи скриптов

Я какое-то время назад постил вариант через CSS + компиляцию/загрузку иконочного файла через иконочный сервис
https://support.rusff.me/viewtopic.php?id=4028

Не помню, репостили его сюда или нет, но по идее есть смысл тоже перепостить мне будет нормально :unsure:

Собственно, минус CSS-варианта в том, что сколько дизайнов - столько и вариантов, и под конкретные дизайны его может прийтись подгонять, что не все могут сделать сами. Но, имхо, этот вариант всё еще лучше скриптового.

UPD. В общем-то то же самое, просто написанное по-другому, вместо муновского файла Майббшный прикрутить только xD

Telegram @lawrenjin

Перевести Поделиться3Пт, 9 Янв 2026 00:00:10

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7608
Уважение: +6156
Позитив: +6698
Пол: Мужской
Последний визит:
Вчера 19:07:44

Arakhen написал(а):

Я какое-то время назад постил вариант через CSS + компиляцию/загрузку иконочного файла через иконочный сервис
https://support.rusff.me/viewtopic.php?id=4028

Не помню, репостили его сюда или нет, но по идее есть смысл перепостить мне будет нормально

Да, имеет смысл, можно и оптимизировать.. Только я не понял, сервис не поддерживает woff2?

Arakhen написал(а):

Собственно, минус CSS-варианта в том, что сколько дизайнов - столько и вариантов, и под конкретные дизайны его может прийтись подгонять, что не все могут сделать сами. Но, имхо, этот вариант всё еще лучше скриптового.

Ну, тот вариант, что я выложил с минимальными своими настройками можно адаптировать под любой дизайн, поэтому настройки и вынес. Собственно имеет смысл только цвет и размер ячейки и размер шрифта - это настроить быстро можно. В твоем варианте сложнее - там надо коды прописывать для дефолтных бб-кодов.

Собственно мой код пойдет и под этот сервис:

Загружаем шрифт @font-face {}
Подключаем шрифт #form-buttons td::before {}

А далее всё как у меня выше (только с другими кодами:

/* ===============================
Базовая разметка панели
=============================== */

#form-buttons tr {
display: block;
width: 100%;
}

#form-buttons td {
position: relative;
display: inline-block;
background: none !important;
}

#form-buttons td img {
position: absolute;
inset: 0;
z-index: 10;
opacity: 0; /* скрываем blank.gif */
cursor: pointer;
}

#form-buttons td::before {
display: block;
position: absolute;
left: 0;
top: 0;

pointer-events: none;
}

/* ===== Размер шрифта, Размер кнопок, Расположение, Цвета кнопок и HOVER зффект ===== */

#form-buttons tr {
text-align: center;
}

#form-buttons td {
width: 24px;
height: 24px;
margin: 0 5px 5px;
border-radius: 5px;
}

#form-buttons td img {height: 24px;}

#form-buttons td::before {
width: 24px;
height: 24px;
text-align: center;
font-size: 22px;
line-height: 24px;
color: #56615c;
}

#form-buttons td:hover::before {
color: #6d6851;
}

/* ===============================
Шрифт / размер
=============================== */

#button-font::before { content: '\e167'; } /* font_download */
#button-size::before { content: '\e245'; } /* format_size */

/* ===============================
Форматирование текста
=============================== */

#button-bold::before { content: '\e238'; } /* format_bold */
#button-italic::before { content: '\e23f'; } /* format_italic */
#button-underline::before { content: '\e249'; } /* format_underlined */
#button-strike::before { content: '\e257'; } /* strikethrough_s */

/* ===============================
Выравнивание
=============================== */

#button-left::before { content: '\e236'; } /* format_align_left */
#button-center::before { content: '\e234'; } /* format_align_center */
#button-right::before { content: '\e237'; } /* format_align_right */

/* ===============================
Ссылки и медиа
=============================== */

#button-link::before { content: '\e157'; } /* link */
#button-image::before { content: '\e3f4'; } /* image */
#button-video::before { content: '\e04b'; } /* videocam */

/* ===============================
Спец-блоки
=============================== */

#button-spoiler::before { content: '\e313'; } /* expand_more */
#button-hide::before { content: '\e8f5'; } /* visibility_off */
#button-quote::before { content: '\e244'; } /* format_quote */
#button-code::before { content: '\e86f'; } /* code */
#button-table::before { content: '\e265'; } /* table_chart */

/* ===============================
Цвет / смайлы / прочее
=============================== */

#button-color::before { content: '\e40a'; } /* palette */
#button-smile::before { content: '\e420'; } /* sentiment_satisfied */
#button-keyboard::before { content: '\e312'; } /* keyboard */
#button-addition::before { content: '\e147'; } /* add_circle */

Ну, и дополнительные кнопки:

/* ===== Дополнительные кнопки ===== */

#button-image2::before { content: '\e3d3'; } /* collections */
#button-indent::before { content: '\e23e'; } /* format_indent_increase */

Перевести Поделиться4Пт, 9 Янв 2026 00:07:33

Автор: Arakhen
Inner Party System
Зарегистрирован: Ср, 10 Май 2017
Сообщений: 591
Уважение: +543
Позитив: +527
Последний визит:
Вчера 22:27:45

kolobdur74 написал(а):

Только я не понял, сервис не поддерживает woff2?

А вот не уверен, кстати. Может и не поддерживать его основная версия их апки.
Он там в любом случае был указан просто как источник, откуда можно подтянуть иконочные файлы на свой вкус с минимумом гемора и знаний (самое то не особо прошаренным пользователям). Возможно, есть и другие похожие сервисы, но с головы сейчас не помню.

kolobdur74 написал(а):

Да, имеет смысл, можно и оптимизировать..

Оке, чуть позже перетащу тогда.

Telegram @lawrenjin

Перевести Поделиться5Пт, 9 Янв 2026 00:38:35

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7608
Уважение: +6156
Позитив: +6698
Пол: Мужской
Последний визит:
Вчера 19:07:44

Arakhen написал(а):

А вот не уверен, кстати. Может и не поддерживать его основная версия их апки.
Он там в любом случае был указан просто как источник, откуда можно подтянуть иконочные файлы на свой вкус с минимумом гемора и знаний (самое то не особо прошаренным пользователям). Возможно, есть и другие похожие сервисы, но с головы сейчас не помню.

Без woff2 плохо - он сейчас основной, остальные можно и не учитывать..

Перевести Поделиться6Пт, 9 Янв 2026 00:41:14

Автор: Arakhen
Inner Party System
Зарегистрирован: Ср, 10 Май 2017
Сообщений: 591
Уважение: +543
Позитив: +527
Последний визит:
Вчера 22:27:45

kolobdur74
Чисто технически, можно заморочиться и конвертировать какой-то из этих файлов в woff2 Судя по гуглу, вполне реально сделать тоже открытыми ресурсами

Telegram @lawrenjin

Перевести Поделиться7Пт, 9 Янв 2026 00:44:02

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7608
Уважение: +6156
Позитив: +6698
Пол: Мужской
Последний визит:
Вчера 19:07:44

Arakhen написал(а):

Чисто технически, можно заморочиться и конвертировать какой-то из этих файлов в woff2 Судя по гуглу, вполне реально сделать тоже открытыми ресурсами

Ну, если весь пакет иконок, то имеет смысл, только коды подставляй нужные..

Перевести Поделиться8Пт, 9 Янв 2026 11:54:56

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7608
Уважение: +6156
Позитив: +6698
Пол: Мужской
Последний визит:
Вчера 19:07:44

Добавил в первый пост шаблон подключения своих иконок.

Страница: 1

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Подключение иконок в стиле Material Icons и MyBB техподдержки на css

Сообщений 1 страница 8 из 8

Перевести Поделиться1Чт, 8 Янв 2026 18:03:23

Перевести Поделиться2Чт, 8 Янв 2026 23:40:31

Перевести Поделиться3Пт, 9 Янв 2026 00:00:10

Перевести Поделиться4Пт, 9 Янв 2026 00:07:33

Перевести Поделиться5Пт, 9 Янв 2026 00:38:35

Перевести Поделиться6Пт, 9 Янв 2026 00:41:14

Перевести Поделиться7Пт, 9 Янв 2026 00:44:02

Перевести Поделиться8Пт, 9 Янв 2026 11:54:56

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Подключение иконок в стиле Material Icons и MyBB техподдержки на css

Сообщений 1 страница 8 из 8

ПеревестиПоделиться1Чт, 8 Янв 2026 18:03:23

ПеревестиПоделиться2Чт, 8 Янв 2026 23:40:31

ПеревестиПоделиться3Пт, 9 Янв 2026 00:00:10

ПеревестиПоделиться4Пт, 9 Янв 2026 00:07:33

ПеревестиПоделиться5Пт, 9 Янв 2026 00:38:35

ПеревестиПоделиться6Пт, 9 Янв 2026 00:41:14

ПеревестиПоделиться7Пт, 9 Янв 2026 00:44:02

ПеревестиПоделиться8Пт, 9 Янв 2026 11:54:56

Перевести Поделиться1Чт, 8 Янв 2026 18:03:23

Перевести Поделиться2Чт, 8 Янв 2026 23:40:31

Перевести Поделиться3Пт, 9 Янв 2026 00:00:10

Перевести Поделиться4Пт, 9 Янв 2026 00:07:33

Перевести Поделиться5Пт, 9 Янв 2026 00:38:35

Перевести Поделиться6Пт, 9 Янв 2026 00:41:14

Перевести Поделиться7Пт, 9 Янв 2026 00:44:02

Перевести Поделиться8Пт, 9 Янв 2026 11:54:56