Jump to content

Social Buttons добавление иконки


 Share

Recommended Posts

Ребята как в Social Buttons добавить кнопку Одноклассники и Вконтакте чтобы были с иконками?Вот скрин где они будут эти иконки.Где ставить я знаю в стиле но как поставить с иконками соц ситей?

Безымянный.png

Link to comment
Share on other sites

skyurter19881205, в настройках стиля посмотри. если нет такой настройки? то только вручную прописывать.

Спойлер

42423434.PNG

 

Link to comment
Share on other sites

Есть в настройках.Но мне нужно прописать там строчку для контакта и одноклассников я прописываю но иконка вк и однокласники не отображается а отображается черная иконка

1.png

2.png

Link to comment
Share on other sites

skyurter19881205, кэш попробуй очистить. через поддержку.  может еще значок ВК не добавлен в сам стиль.

Link to comment
Share on other sites

в global.css нужно добавить код:

a.ipsfocus_sVkontakte:before {
    content: "\f189";
}
a.ipsfocus_sOk:before {
    content: "\f0c0";
}
.ipsfocus_sVkontakte {    background: #3992df;
    background-image: linear-gradient(to bottom, #95c5ff 0%, #00a1ff 100%);
}
.ipsfocus_sOk {
    background: #3992df;
    background-image: linear-gradient(to bottom, #fffc95 0%, #ff9900 100%);
}

Кроме того, вам необходимо хотя бы ссылки туда поставить, не просто a href="#"

P.S. global.css находится здесь: АДминЦП- стили и шаблоны - кликнуть на карандаш около вашего стиля, перейти на вкладку css и вбить в строку поиска global

2017-04-25 20_44_04-Стили и шаблоны.png

Link to comment
Share on other sites

25 минут назад, skyurter19881205 сказал:

а куда его добавлять то значок?

находишь в стиле в CSS

/* ====================== */
/*     SOCIAL BUTTONS     */
/* ====================== */
 

Спойлер

324535.PNG

далее ниже находишь такие строки

Спойлер

35353535.PNG

и вписываешь ниже

a.ipsfocus_sVk:before{ content: "\f189"; }
.ipsfocus_social .ipsfocus_sVk{ background: #0097d3; background-image: linear-gradient(to bottom, #0097d3 0%, #0097d3 100%); }

ну думаю с цветами и размерами сам разберешься.

потом в теме в соц настройках пишешь

<li><a href="#" class="ipsfocus_sVk" target="_blank">VK</a></li>

и на выходе получаем добавленную в стиль кнопку ВК

у меня так получилось

34535445.PNG

 

Link to comment
Share on other sites

зачем повторять то, что уже написано?

 

-----

работать так не будет; иконки сменятся, а цвет нет, поэтому в коде нужно добавить аргумент !important в итоге получаем:

a.ipsfocus_sVkontakte:before {
    content: "\f189";
}
a.ipsfocus_sOk:before {
    content: "\f0c0";
}
.ipsfocus_sVkontakte {    background: #3992df !important;
    background-image: linear-gradient(to bottom, #95c5ff 0%, #00a1ff 100%) !important;
}
.ipsfocus_sOk {
    background: #3992df !important;
    background-image: linear-gradient(to bottom, #fffc95 0%, #ff9900 100%) !important;
}

Можно даже там же заключить между тегом <style></style> , без лазаний в шаблоны

2017-04-25 20_54_12-JEDI Российский форум.png

Link to comment
Share on other sites

2 минуты назад, Envy сказал:

зачем повторять то, что уже написано?

я писал то что сам сделал и проверил только сейчас. я пока не экстрасенс я только учусь. и не мог знать что ты там пишешь.

Link to comment
Share on other sites

2 минуты назад, Igorek сказал:

я писал то что сам сделал и проверил только сейчас. я пока не экстрасенс я только учусь. и не мог знать что ты там пишешь.

перед тем, как что-то писать, можно пролистать тему, а не заплевывать язвительными коментами экран)

1 минуту назад, skyurter19881205 сказал:

одноклассники окрасились в цвет жолтый а вк нет

код вставьте который я выше дал

<style>a.ipsfocus_sVkontakte:before {
    content: "\f189";
}
a.ipsfocus_sOk:before {
    content: "\f0c0";
}
.ipsfocus_sVkontakte {    background: #3992df !important;
    background-image: linear-gradient(to bottom, #95c5ff 0%, #00a1ff 100%) !important;
}
.ipsfocus_sOk {
    background: #3992df !important;
    background-image: linear-gradient(to bottom, #fffc95 0%, #ff9900 100%) !important;
  }</style>

Попробуйте тогда так вставить в самый верх перед первым <li>2017-04-25 21_02_32-Social Buttons добавление иконки - Техническая поддержка IPS Community Suite 4 -.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...