это через этот скрипт делается: Сворачивание полей профиля

тоха с пельменной
есть скрипты рандомных картинок. например, вот этот подойдет: Ротатор случайных баннеров

вставляешь его внутрь какого-нибудь блока:

а потом в стиле колдуешь над селектором #mypics, делая его всплывающим окном.

тоха с пельменной
не, ты его засунь в хтмл-низ или хтмл верх - будет на всех.

у нас, например, робот через такой ротатор говорит рандомные фразы:

вкорячен в объявление (которое настроено отображаться на всех страницах форума) и когда юзер перешел на другую страницу или нажал F5 на текущей странице - отображается рандомная фраза из предустановленных.

а если нужно чтоб это было только на какой-то конкретной странице, то тоже можно. но как в таком случае засовывать ротатор зависит от того на какой странице отображать, а на каких скрыть.

Automation Baby
недавно с Matirial Icons столкнулась с похожей проблемой: http://forum.mybb.ru/viewtopic.php?id=39546

происходить может не только от того, что font-family места, где они есть, "перебивается" стилями сайта.

что делать - зависит от ситуации.
вариант 1. можно вставить их другим кодом.
например, я решила не париться с приоритетом шрифта и прописывать отдельный код для иконок (достаточно большой).
я просто вставила их не через <span>, а через <i> (т.к. в стиле профиля применяется font-family на span)

вариант 2. можно поменять их приоритет через !important
но это не всегда просто. оптимально - "вскрыть" стиль иконок и дописать в него приоритет и селекторы.
например файл: https://fonts.googleapis.com/icon?family=Material+Icons
можно вот так попробовать:

вариант 3. можно разобраться что именно "перебивает" иконки и поправить стиль форума, чтобы не перебивал.

где можно посмотреть на квадратики?

<!-- кнопки в ФО -->
<script type="text/javascript">
$(document).ready(function(){

$("#button-font").append('<span class="material-icons">font_download</span>');
$("#button-size").append('<span class="material-icons">format_size</span>');
$("#button-bold").append('<span class="material-icons">format_bold</span>');
$("#button-italic").append('<span class="material-icons">format_italic</span>');
$("#button-underline").append('<span class="material-icons">format_underlined</span>');
$("#button-strike").append('<span class="material-icons">strikethrough_s</span>');
$("#button-left").append('<span class="material-icons">format_align_left</span>');
$("#button-center").append('<span class="material-icons">format_align_center</span>');
$("#button-right").append('<span class="material-icons">format_align_right</span>');
$("#button-link").append('<span class="material-icons">link</span>');
$("#button-spoiler").append('<span class="material-icons">content_cut</span>');
$("#button-image").append('<span class="material-icons">add_photo_alternate</span>');
$("#button-video").append('<span class="material-icons">ondemand_video</span>');
$("#button-hide").append('<span class="material-icons">lock_open</span>');
$("#button-quote").append('<span class="material-icons">format_quote</span>');
$("#button-code").append('<span class="material-icons">code</span>');
$("#button-color").append('<span class="material-icons">color_lens</span>');
$("#button-table").append('<span class="material-icons">table_view</span>');
$("#button-smile").append('<span class="material-icons">mood</span>');
$("#button-keyboard").append('<span class="material-icons">keyboard</span>');
$("#button-addition").append('<span class="material-icons">library_add</span>');

});
</script>

теги типа <span class="material-icons">library_add</span> = замени на свои иконки через i
но после этого потребуется доработать дизайн формы ответа, т.к. оно вставляется вот так:

т.е. "магия" вставки происходит по клику на img
следовательно, надо эти img разместить и растянуть поверх иконки.

PS добавила себе в список дел выложить готовый пак иконок от Awesome и Matetial в форму ответа.