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

[skyurter19881205]

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

[sasha197]

Зарегистрируйся на этом сайте и добавь себе иконки где за хочешь! http://uptolike.ru/

[skyurter19881205]

да нет надо сделать через настройки шаблона Social Buttons

[sasha197]

Названия домена пожалуйста

[skyurter19881205]

http://jediru.ru

[Igorek]

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

Спойлер

 

[skyurter19881205]

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

[Igorek]

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

[skyurter19881205]

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

[Envy]

Ссылку на форум  дайте

[skyurter19881205]

Вот

http://jediru.ru

[Envy]

в 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

[skyurter19881205]

спасибо большое

[Igorek]

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

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

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

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

Спойлер

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

Спойлер

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

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>

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

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

 

[skyurter19881205]

спасибо

[Envy]

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

 

-----

работать так не будет; иконки сменятся, а цвет нет, поэтому в коде нужно добавить аргумент !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> , без лазаний в шаблоны

[Igorek]

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

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

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

[skyurter19881205]

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

[Envy]

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>

[skyurter19881205]

всё получилось.спасибо.тема закрыта