ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте
Стать модераторомОтзывы

Предложения

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Портфолио » Иконки Material Icons и Font Awesome в форме ответа вместо стандартных


Иконки Material Icons и Font Awesome в форме ответа вместо стандартных

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

1

[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://forumupload.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://forumupload.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://forumupload.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

+5

11

#p149378,ACT3255 написал(а):

Вот что получилось в итоге.

Симпатично!  smalimg

+1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Портфолио » Иконки Material Icons и Font Awesome в форме ответа вместо стандартных