[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="free">
<a class="tip" id="cover" title="Иконки Material Icons и Font Awesome в форме ответа">
<div id="icon"></div>
<img src="https://forumuploads.ru/uploads/0007/e3/f7/2/910116.jpg" class="postimg">
</a>
<div id="cover-block">
Дата: 28.10.2020<br>
Автор: <a href="/profile.php?id=2" target="_blank">Герда</a><br>
Бесплатный код<br>
Описание: Добавляет в форму ответа иконки-шрифты вместо стандартных картинок.
</div>
</div>
<div id="port-block2" class="free">
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Material Icons"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2/829592.jpg" class="postimg"></a></section>
<section class="wow bounceIn" data-wow-duration="1s">
<a class="tip" title="Font Awesome"><img src="https://forumuploads.ru/uploads/0007/e3/f7/2/344555.jpg" class="postimg"></a></section>
</div>
<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
#pun .punbb .post-content hr {border: 3px solid #279933;}
.post-content td {background-color: rgb(0,0,0,0.5) !important;}
.visible .quote-box {background-color: rgba(0,0,0,0.5);}
</style>[/html]
Material Icons
Скрипт:
Пояснения
Material Icons подключены этой строчкой кода:Код:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">если у вас уже установлены эти иконки (с другими скриптами или через стиль), удалите эту строчку.
Настройки стиля находятся между тегов <style> - все настройки дизайна, цвета и размера подписаны. Можете поменять на свой вкус и цвет.
Как добавить/поменять иконки?
В строчке скрипта:$("#button-addition").append('<i class="material-icons">library_add</i>');
красное - селектор кнопки
синее - код иконкиПри необходимости переделать другие иконки (например, вставленные скриптами) добавьте новую такую строчку, укажите селектор кнопки и добавьте иконку.
При необходимости поменять иконку на другую, замените текст внутри тега, например, library_add на другой.Посмотреть все иконки и подобрать себе новые можно тут: https://material.io/resources/icons/?style=baseline
Font Awesome
Скрипт:
Пояснения
Иконки Font Awesome подключены этой строчкой кода:Код:<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">если у вас уже установлены эти иконки (с другими скриптами или через стиль), удалите эту строчку.
Настройки стиля находятся между тегов <style> - все настройки дизайна, цвета и размера подписаны. Можете поменять на свой вкус и цвет.
Как добавить/поменять иконки?
В строчке скрипта:$("#button-addition").append('<i class="fas fa-plus-circle"></i>');
красное - селектор кнопки
синее - код иконкиПри необходимости переделать другие иконки (например, вставленные скриптами) добавьте новую такую строчку, укажите селектор кнопки и добавьте иконку.
При необходимости поменять иконку на другую, замените код иконки на другой.Посмотреть все иконки и подобрать себе новые можно тут: https://fontawesome.com/icons?d=gallery&m=free
