Создание ссылок со значками социальных сетей с использованием только CSS
Опубликовано: 25.10.2017
Из этого урока вы узнаете, как создать ссылки со значками социальных сетей, используя CSS и простой HTML. С помощью современных технологий, без использования изображений или JavaScript сделаем из ненумерованного списка текстовых ссылок набор значков. Это решение поддерживается всем современными версиями браузеров и даже такими старыми, как Internet Explorer версии 8.
Демонстрация работы – Посмотреть исходный код
Значки социальных сетей
На изображении ниже показано, как будет выглядеть результат:
Начнем с создания списка ссылок, в котором у каждой ссылки осмысленный текст, затем поочередно зададим каждой ссылке стили, чтобы она была похожа на соответствующий символ социальной сети. В результате у нас будет поддержка программ, читающих с экрана.
Как использовать SVG иконки
Еще добавим короткий текст в атрибуте названия каждой ссылки, чтобы пользователи при наведении указателя мыши на ссылку смогли прочесть, что сделает тот или иной значок при нажатии на него.
Код примера
Код HTML состоит из ненумерованного списка ссылок разных социальных сетей и сервисов:
Шрифтовые иконки. Что это и как подключить?
<ul> <li class ="facebook" > <a href ="#non" title ="Share on Facebook" > Facebook </a> </li> <li class ="twitter" > <a href ="#non" title ="Share on Twitter" > Twitter </a> </li> <li class ="rss" > <a href ="#non" title ="Subscribe to the RSS feed" > RSS </a> </li> <li class ="flickr" > <a href ="#non" title ="Share on Flickr" > Flickr </a> </li> <li class ="delicious" > <a href ="#non" title ="Bookmark on Delicious" > Delicious </a> </li> <li class ="linkedin" > <a href ="#non" title ="Share on LinkedIn" > LinkedIn </a> </li> <li class ="google" > <a href ="#non" title ="Bookmark with Google" > Google </a> </li> <li class ="orkut" > <a href ="#non" title ="Share on Orkut" > Orkut </a> </li> <li class ="technorati" > <a href ="#non" title ="Add to Technorati" > Technorati </a> </li> <li class ="netvibes" > <a href ="#non" title ="Add to NetVibes" > NetVibes </a> </li> </ul>
Применим общие стили для элементов, из которых состоит список: