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

Объявление

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

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

Подробнее

Мийрон

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее

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

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

Предложения

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

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


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


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

Сообщений 1 страница 10 из 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://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

+5

2

Герда
Здравствуйте, данный скрипт ставим в форму ответа или в HTML низ?

Отредактировано ACT3255 (28.10.2020 15:43:33)

0

3

ACT3255
Лучше всего - в форму ответа. Но работать будет и там, и там.

+2

4

Здравствуйте.
У меня стоит:

Код:
<!-- Шрифт по умолчанию -->
<style>
#pun * {
    font-family: "Oswald" !important;
}
</style>

при этом стиле вот, что...
https://forumuploads.ru/uploads/0007/e3/f7/6989/t238488.png
Убираю этот стиль все нормально:
https://forumuploads.ru/uploads/0007/e3/f7/6989/t435302.png
Как тогда поменять шрифт на всем форуме? :flag:

0

5

ACT3255
Ну Наверно !important; - лишнее, ибо ты принудительно ставишь этот шрифт на все элементы, даже те, которые прописаны иным шрифтом

2-е А нафига каждый элемент *?

Я бы поставил так:

<!-- Шрифт по умолчанию -->
<style>
#pun {
    font-family: "Oswald";
}
</style>

0

6

#p149310,Deff написал(а):

<!-- Шрифт по умолчанию -->
<style>
#pun {
    font-family: "Oswald";
}
</style>

Не, так я пробовал, шрифт на всем форуме не меняется.
https://forumuploads.ru/uploads/0007/e3/f7/6989/t868171.png
надо что бы везде-везде поменялся...
Если ставить, то что ставлю я, то естественно меняется везде
https://forumuploads.ru/uploads/0007/e3/f7/6989/t484819.png
Вот такая вот аказия у меня ))))

Отредактировано ACT3255 (16.03.2021 13:50:30)

+1

7

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

Не, так я пробовал, шрифт на всем форуме не меняется.

По идее, шрифт везде (или почти везде, за исключением случаев, где он прописан индивидуально) можно поменять в этой строчке в стиле:

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  }

/* A3.2 */
.punbb {
  font: normal 68.75% тут имя своего шрифта с запятой в конце, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  }

Разумеется, шрифт должен быть подключён в стиле или хтмл-верхе. Он тогда будет подгружаться первым, в случае чего будет подгружаться следующий после запятой.

+3

8

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

Не, так я пробовал, шрифт на всем форуме не меняется.

Так проще убрать текущий шрифт в Стиле с элементов, где сейчас не меняется при без important и *

Ибо к примеру ты и в сообщении после твоих манипуляций с  important иной шрифт тегом [font=Шрифт][/font]

не проставишь...

+2

9

Всем спасибо за подсказки, ковыряю свой стиль, все время про него забываю... вот такой я  :smoke:

+2

10

https://forumuploads.ru/uploads/0007/e3/f7/6989/t525833.png
Вот что получилось в итоге.

Отредактировано ACT3255 (17.03.2021 14:25:14)

+1

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

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


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

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


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