Есть еще такой вариант
http://bootsnipp.com/snippets/x42Wдля тех кому интересно как сделать такие кнопки
Twitter BootstrapПлагин NS Font Awesome
http://extensions.joomla.org/extension/style-a-design/typography/ns-font-awesomeМодуль Blank Module
http://extensions.joomla.org/extensions/extension/core-enhancements/coding-a-scripts-integration/blank-module<style type="text/css">
.btn-social{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-social :first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
.btn-social.btn-lg{padding-left:61px}.btn-social.btn-lg :first-child{line-height:45px;width:45px;font-size:1.8em}
.btn-social.btn-sm{padding-left:38px}.btn-social.btn-sm :first-child{line-height:28px;width:28px;font-size:1.4em}
.btn-social.btn-xs{padding-left:30px}.btn-social.btn-xs :first-child{line-height:20px;width:20px;font-size:1.2em}
.btn-social-icon{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:34px;width:34px;padding:0}.btn-social-icon :first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
.btn-social-icon.btn-lg{padding-left:61px}.btn-social-icon.btn-lg :first-child{line-height:45px;width:45px;font-size:1.8em}
.btn-social-icon.btn-sm{padding-left:38px}.btn-social-icon.btn-sm :first-child{line-height:28px;width:28px;font-size:1.4em}
.btn-social-icon.btn-xs{padding-left:30px}.btn-social-icon.btn-xs :first-child{line-height:20px;width:20px;font-size:1.2em}
.btn-social-icon :first-child{border:none;text-align:center;width:100% !important}
.btn-social-icon.btn-lg{height:45px;width:45px;padding-left:0;padding-right:0}
.btn-social-icon.btn-sm{height:30px;width:30px;padding-left:0;padding-right:0}
.btn-social-icon.btn-xs{height:22px;width:22px;padding-left:0;padding-right:0}
</style>
<div class="text-center">
<a class="btn btn-social-icon btn-youtube btn-danger" style="margin:3px;" rel="nofollow" href="" target="_blank">
<i class="fa fa-youtube fa-lg"></i></a>
<a class="btn btn-social-icon btn-twitter btn-info" style="margin:3px;" rel="nofollow" href="" target="_blank">
<i class="fa fa-twitter fa-lg"></i></a>
<a class="btn btn-social-icon btn-facebook btn-primary" style="margin:3px;" rel="nofollow" href="" target="_blank">
<i class="fa fa-facebook fa-lg"></i></a>
<a class="btn btn-social-icon btn-vk btn-info " style="margin:3px;" rel="nofollow" href="" target="_blank">
<i class="fa fa-vk fa-lg"></i></a>
<a class="btn btn-social-icon btn-linkedin btn-primary" style="margin:3px;" rel="nofollow" href="" target="_blank">
<i class="fa fa-linkedin fa-lg"></i></a>
</div>
Font берется здесь:
http://fortawesome.github.io/Font-Awesome/cheatsheet/В mod_socialmedialinks-J3-bootstrap-social.zip кнопки отображаются так:
Не забудьте установить Плагин
NS Font Awesome без него иконки не отображает
В mod_socialmedialinks-J3-bootstrap-social-2.zip кнопки отображаются так:
В mod_socialmedialinks-J3-bootstrap-social-3.zip кнопки отображаются так:
Единственный минус Font, отсутствие Яндекс, майл и еще некоторых социальных сетей.
Причина проста спасибо плагину:
Warning!
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.
Внимание!
Судя по всему, Adblock Plus можно удалить шрифт Высокий иконки бренда с их настройкой "Удалить Социальные медиа кнопки". Мы не будем использовать хаки, чтобы заставить их отображения. Пожалуйста, сообщите о проблеме с Adblock Plus, если вы считаете, что это ошибка. Чтобы обойти это, вы должны будете изменить имена классов социальной значок.
13.05.2023, 15:42:15