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

Почему то подключение [footnote=Для поиска кодов иконок можно использовать вот этот сервис: https://fontdrop.info/ ]иконок[/footnote] в стиле [footnote=Material Icons - это старые Гугловские иконки, более новые не подключить, во всяком случае простым способом через CSS. Движок форума, похоже, не поддерживает более новый вариант. Сам шрифт иконок я скачал и залил на Майбб. Если кто хочет можно использовать гугловский напрямую: https://fonts.gstatic.com/s/materialico … DsNc.woff2 ]Material Icons[/footnote] и 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 */

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

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

Код:

/* ===============================
   Загрузка Пак 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;
}

Вёрстка от Колобдура

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

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

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

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

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

Поделиться12026-04-10 10:28:27