Код:

/* Material Icons */

@import url('https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined');

/* Иконки в форме ответа 
-------------------------------------------------------------*/

.punbb #main-reply {box-sizing: border-box;}
.punbb #form-buttons table {width: 100%;}

.punbb #form-buttons tr {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-between;
padding: 0 0 5px;
width: 100%;
}

#post-form #form-buttons td {
background-image: none !important;
position: relative;
display: inline-block;
width: 30px;
height: 30px;
}

.punbb #form-buttons td img {
width: 30px;
height: 30px;
}

#form-buttons td:before {
content: " ";
font-family: 'Material Icons Outlined';
font-size: 24px;
color: #000;
position: absolute;
pointer-events: none;
transition: all .5s linear 0s;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 0;
}

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

/* Стандартные кнопки */

td#button-font:before {content: "\e167";}
td#button-size:before {content: "\e262";}
td#button-bold:before {content: "\e238";}
td#button-italic:before {content: "\e23f";}
td#button-underline:before {content: "\e249";}
td#button-strike:before {content: "\e257";}
td#button-left:before {content: "\e236";}
td#button-center:before {content: "\e234";}
td#button-right:before {content: "\e237";}
td#button-link:before {content: "\e157";}
td#button-spoiler:before {content: "\e8f5";}
td#button-spoiler:hover:before {content: "\e8f4";}
td#button-image:before {content: "\e43e";}
td#button-video:before {content: "\e070";}
td#button-hide:before {content: "\e898";}
td#button-hide:hover:before {content: "\e897";}
td#button-quote:before {content: "\e8af";}
td#button-code:before {content: "\e86f";}
td#button-color:before {content: "\e40a";}
td#button-table:before {content: "\e3ec";}
td#button-smile:before {content: "\ea22";}
td#button-keyboard:before {content: "\f028";}
td#button-addition:before {content: "\ea20";}
td#button-files_rusff:before {content: "\e2c7";}
td#button-files_rusff:hover:before {content: "\e2c8";}
td#button-graffiti_rusff:before {content: "\e3ae";}

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

td#button-indent:before {content: "\e23e";} /* тег абзаца */
td#button-styles:before {content: "\e41d";} /* дополнительные стили */
td#floatbut:before {content: "\efe0";} /* тег обтекания изображения от Romych */
td#button-justify:before {content: "\e235";} /* тег выравнивания по ширине */
td#button-mask:before {content: "\f218";} /* тег для скрипта ролевой маски от человека-шамана */
td#button-sticker:before {content: "\e91d";} /* тег для дополнительных смайлов от человека-шамана */

Код:

/* Font Awesome */

@import url('https://use.fontawesome.com/releases/v5.15.1/css/all.css');

/* Иконки в форме ответа 
-------------------------------------------------------------*/

.punbb #main-reply {box-sizing: border-box;}
.punbb #form-buttons table {width: 100%;}

.punbb #form-buttons tr {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-between;
padding: 0 0 5px;
width: 100%;
}

#post-form #form-buttons td {
background-image: none !important;
position: relative;
display: inline-block;
width: 30px;
height: 30px;
}

.punbb #form-buttons td img {
width: 30px;
height: 30px;
}

#form-buttons td:before {
content: " ";
font-family: "Font Awesome 5 Free";
font-size: 20px;
color: #000;
font-weight: 700;
position: absolute;
pointer-events: none;
transition: all .5s linear 0s;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 0;
}

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

/* Стандартные кнопки */

td#button-font:before {content: "\f031";}
td#button-size:before {content: "\f034";}
td#button-bold:before {content: "\f032";}
td#button-italic:before {content: "\f033";}
td#button-underline:before {content: "\f0cd";}
td#button-strike:before {content: "\f0cc";}
td#button-left:before {content: "\f036";}
td#button-center:before {content: "\f037";}
td#button-right:before {content: "\f038";}
td#button-link:before {content: "\f0c1";}
td#button-spoiler:before {content: "\f070";}
td#button-spoiler:hover:before {content: "\f06e";}
td#button-image:before {content: "\f1c5";}
td#button-video:before {content: "\f144";}
td#button-hide:before {content: "\f13e";}
td#button-hide:hover:before {content: "\f023";}
td#button-quote:before {content: "\f086";}
td#button-code:before {content: "\f121";}
td#button-color:before {content: "\f53f";}
td#button-table:before {content: "\f0ce";}
td#button-smile:before {content: "\f59a";}
td#button-keyboard:before {content: "\f11c";}
td#button-addition:before {content: "\f0fe";}
td#button-files_rusff:before {content: "\f07b";}
td#button-files_rusff:hover:before {content: "\f07c";}
td#button-graffiti_rusff:before {content: "\f5bd";}

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

td#button-indent:before {content: "\f03c";} /* тег абзаца */
td#button-styles:before {content: "\f1de";} /* дополнительные стили */
td#floatbut:before {content: "\f1ea";} /* тег обтекания изображения от Romych */
td#button-justify:before {content: "\f039";} /* тег выравнивания по ширине */
td#button-mask:before {content: "\f630";} /* тег для скрипта ролевой маски от человека-шамана */
td#button-sticker:before {content: "\f1b0";} /* тег для дополнительных смайлов от человека-шамана */

.punbb #main-reply {box-sizing: border-box;}
.punbb #form-buttons table {width: 100%;}
Это нужно, чтобы выровнять ширину окна формы ответа и панели и кнопками тегов. Необязательные пункты.

.punbb #form-buttons tr - это строка таблицы с кнопками над формой ответа. Её настройки и все дела. Собственно, о настройках этого селектора:

• display: flex и display: -webkit-flex - способ отображения блока со, скажем так, расширенными возможностями выравнивания элементов внутри. Может работать не во всех браузерах, но я хочу надеяться, что ваш браузер всё же регулярно обновляется.

• flex-wrap: wrap - чтобы иконки переносились на следующую строку в случае, если не умещаются на одной

• justify-content: space-between - чтобы равномерно распределялись по всей ширине строки. Без display: flex не будет работать.

• padding: 0 0 5px - чтобы не прилипли к форме ответа. Можно указать свои значения, если разбираетесь. В данном случае указан отступ снизу.

• width: 100% - на всю ширину

#post-form #form-buttons td - собственно, кнопки над формой ответа. Точнее сказать, ячейки таблицы. И их настройки:

• background-image: none !important - убираем стандартные картинки от сервиса. !important, потому что граффити и вложения идут отдельно, как сервисное дополнение и иначе не спрячутся.

• position: relative - чтобы в дальнейшем манипуляции с новыми иконками происходили внутри границ кнопки, а не выходили за её пределы.

• width: 30px - ширина кнопки. Можно указать своё значение, если слишком широко или, напротив, слишком узко.

• height: 30px - высота кнопки. Тоже можно указать другое значение.

.punbb #form-buttons td img - настройки картинок внутри кнопок. Они нужны, поскольку к ним прикруче скрипт, активирующий теги. Иными словами, если убрать, то при нажатии ничего не произойдёт. Поэтому не убираем.

• width: 30px и height: 30px - ширина и высота. Должны быть равны тем, что в блоке выше.

#form-buttons td:before - псевдоэлемент, куда мы будем добавлять наши новые иконки. Это общие настройки для всех кнопок, далее будут индивидуальные.

• content: " " - строчка, куда можно добавить текст, символы и т.д. к псевдоэлементу. Очень важный атрибут, без него псевдоэлемент работать не будет. В данном случае оставляем его пустым.

• font-family: 'Material Icons Outlined' - тут указан иконочный шрифт, который мы используем. Я выбрал контурный вариант. Если используем Font Awesome, то меняем то, что в кавычках, на Font Awesome 5 Free.

• font-size: 24px - размер шрифта, иными словами, размер иконок. Лучше не делать больше 30 пикселей, т.к. помним о ширине и высоте кнопок. В случае с Font Awesome использован кегль поменьше - 20px.

• color: #000 - цвет иконок. Можно указать на свой вкус.

• position: absolute - просто нужно, без него не будет работать.

• pointer-events: none - см. пункт выше.

• transition: all .5s linear 0s; - для плавной смены цвета при наведении на кнопку, если такая смена цвета предполагается.

• width: 30px и height: 30px - ширина и высота. Разумеется, лучше сделать точно в размер ячейки.

• display: flex - чтобы можно было установить ровно по центру кнопки

• align-items: center и justify-content: center - выравнивание по центру относительно ширины и высоты. Без пункта выше не будет работать.

• left: 0 и top: 0 - чтобы новая иконка находилась в пределах своих границ, а не уехала куда-нибудь.

#form-buttons td:hover:before {color: #808080;} - в фигурных скобках указан цвет иконок при наведении на них курсора. Необязательный пункт, просто для красоты. Можно указать свой цвет.

Далее сами иконки:

td#button-font:before {content: "\e167";} - Шрифт
td#button-size:before {content: "\e262";} - Размер шрифта
td#button-bold:before {content: "\e238";} - Жирный
td#button-italic:before {content: "\e23f";} - Курсив
td#button-underline:before {content: "\e249";} - Подчёркнутый
td#button-strike:before {content: "\e257";} - Зачёркнутый
td#button-left:before {content: "\e236";} - Выравнивание по левому краю
td#button-center:before {content: "\e234";} - Выравнивание по центру
td#button-right:before {content: "\e237";} - Выравнивание по правому краю
td#button-link:before {content: "\e157";} - Ссылка
td#button-spoiler:before {content: "\e8f5";} - Свёрнутый текст (спойлер)
td#button-spoiler:hover:before {content: "\e8f4";} - Свёрнутый текст (спойлер) при наведении (зачёркнутый глаз меняется на незачёркнутый. Необязательная строчка, можно вообще убрать.
td#button-image:before {content: "\e43e";} - Изображение
td#button-video:before {content: "\e070";} - Видео
td#button-hide:before {content: "\e898";} - Скрытый текст.
td#button-hide:hover:before {content: "\e897";} - Скрытый текст при наведении. Тоже необязательная строчка.
td#button-quote:before {content: "\e8af";} - Цитата
td#button-code:before {content: "\e86f";} - Код
td#button-color:before {content: "\e40a";} - Цвет
td#button-table:before {content: "\f1be";} - Таблица
td#button-smile:before {content: "\ea22";} - Смайлики
td#button-keyboard:before {content: "\f028";} - Виртуальная клавиатура
td#button-addition:before {content: "\ea20";} - Дополнительно
td#button-files_rusff:before {content: "\e2c7";} - Вложения
td#button-files_rusff:hover:before {content: "\e2c8";} - Вложения при наведении курсора. Необязательный пункт. Кому нафиг сдались эти вложения...
td#button-graffiti_rusff:before {content: "\e3ae";} - Граффити

Дополнительные кнопки подписаны уже в коде. Если вам они не нужны - можете убрать.