Иконки социальных сетей

Добрый день форумчане! Верстаю свою шаблон, я еще не очень силен в CSS.
Столкнулся с глобальной проблемой, не могу прикрутить соц. кнопки (пытаюсь сделать без сторонних плагинов, сервисов, модулей и т.д.)

Суть простая: картинка соц.сети, она же ссылка в группу. Со счетчиками, лайками и репостами разберемся позжее...

Собственно код:

Код

<div class="col-sm-4">
	<ul class="footer-social">
		<li>
			<a class="footer-social_vk" href="http://vk.com"></a>
		</li>
		<li>
			<a class="footer-social_tw" href="https://twitter.com/"></a>
		</li>					
	</ul>
</div>

Код: css

.footer-social {
	font-size: 16px;
	text-align: center;
	margin-top: -30px;
}

.footer-social li {
	display: inline;
	margin: 0 5px;
}

.footer-social_vk a {
	background-image: url(../images/button_vk.png) no-repeat;
        height: 40px;
	width: 40px;
}

.footer-social_tw {
	background-image: url(../images/button_tw.png) no-repeat;
        height: 40px;
	width: 40px;
}

Стили ссылок наследуют родительский класс и ни в одном из вариантов картинка не отображается. Если присвоить картинку к классу "footer-social", то всё хорошо, но ссылок и картинок надо по 5 шт.

Пытался делать по примеру реального сайта, не могу понять, почему там ссылки имеют самостоятельные классы, а не наследуют родительский.

Вообщем страдаю уже 3й день, пробовал разные методы, ничего не выходит. Помогите разобраться!

Иконки перед документами Автор kunsaid	Ответов: 4 Просмотров: 3245	07.12.2021, 11:41:41 от kunsaid
Странный вид иконки печати Автор jma	Ответов: 1 Просмотров: 1388	20.11.2017, 15:21:34 от jma
Иконки fontello Автор AShepelin	Ответов: 0 Просмотров: 1913	28.10.2014, 02:12:12 от AShepelin
Только на главной странице вместо иконки отображается текст Автор maximm	Ответов: 1 Просмотров: 2164	10.06.2014, 10:49:13 от darkghost
Изменить цвет и добавление кнопок соц. сетей Автор Kuznetsov_ilya	Ответов: 4 Просмотров: 1572	21.04.2014, 15:53:09 от Shustry

Иконки социальных сетей - Вопросы по CSS

Новости Joomla

Вышли релизы Joomla 6.0.3 и Joomla 5.4.3

👩‍💻 События плагинов и порядок их срабатывания при работе с пользовательскими полями Joomla и использовании FieldsHelper.

🏆 Открыто голосование за Joomla в премии CMS Critic People’s Choice Awards 2025

alezzandr

Иконки социальных сетей

Libertex

Re: Иконки социальных сетей

Похожие темы