- изменение размера не влияет на качество,
- отлично отображаются на всех девайсах, в том числе и с Retina-дисплеями,
- применение практически любых стилей применимых к тексту, таких как фон, цвет, тени и т.п.,
- простота реализации;
К вашему вниманию шрифты с иконками социальных сетей.
1. RONDO SOCIAL ICON FONT
Отличные шрифтовые иконки одних из самых популярных социальных сетей и не только, но к сожалению отсутствует иконка нашего, всеми любимого .2. Fontello - icon fonts generator
Генератор иконок, с огромным набором уже готовых иконок. Одним из преимуществ является возможность выбрать только необходимые иконки и сгенерировать из них шрифт, что благоприятно повлияет на оптимизацию страницы и скорость загрузки такого шрифта. Из преимуществ также можно выделить наличие иконок таких социальных сетей как Вконтакте и Одноклассники.
3. Mono Social Icons Font
Идеальное решение для быстрой интеграции шрифтовых иконок в проект, уже имеется код для вставки на CSS, SCSS и пример HTML. Единственный недостаток отсутствие популярных русских социальных сетей.
4. Pixeden - Social Icon Pack
Хорошие иконки с мощной демонстрационной страницей, можно видеть всю прелесть использования шрифтовых иконок и их стилизацию средствами CSS
Здравствуйте, уважаемые читатели блога сайт. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно , да и будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из , о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).
А также я посчитал уместным и по Емайлу.
Создаем спрайт из кнопок и вставляем Html код на сайт
После того, как все нужные группы и страницы в соцсетях вы создали, а значит получили все необходимые ссылки, можно озадачиваться добавлением кнопок на сайт. Можно, конечно же, в соответствии с моим постом про , подобрать для каждой соцсети подходящую иконку и при необходимости уменьшить ее размер до необходимого в и .
Но это не есть лучший вариант. Почему? Ну, потому что для подгрузки каждой картинки соцсети будет осуществляться отдельный запрос к вашему серверу. Будет у вас десяток иконок — значит десять запросов, которые по-любому будут создавать дополнительную нагрузку на сервер и . Нам такое расточительство не подходит, тем более, что уже давно .
Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше). В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).
Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 , поэтому мой спрайт выглядит так ( , правда, туда еще затесался, но это не беда):
Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из . В моем случае он называется sidebar.php. Html код при этом получается крайне простой:
Ну, и самое интересное. С помощью мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.
Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Хорошую вещь я откопал. Интерфейсные иконки, заключенные в один спрайт. Если кто не знает, что такое спрайт - это одна картинка, в которой есть несколько изображений, отображающиеся на сайте отдельно посредством css. Не знаю, понятно ли я объяснил, но вы на примере этой сборке можете узнать, что такое спрайт.
Преимущества спрайтов
Давно я не выкладывал иконки, наверное потому, что все иконки, которые были мне нужны уже были на моем сайте:)) но вот понадобились иконки в одном спрайте и я нашел эти и делюсь ими с Вами. Кстати отличительная черта и самый существенный плюс спрайта, это то, что если загрузилась картинка спрайт один раз, то все элементы этого спрайта больше не будут подгружатся и соответственно будут уменьшать скорость html страницы. Обычно спрайты используют для кнопок, которые меняются при наведении. Иногда бывает такое, что кнопка в обычном состоянии и кнопка при наведении - это две разные картинки и вы могли заметить на каких-либо сайтах, когда наводишь на кнопку, изображение появляется не сразу - оно подгружается. Со спрайтом такой проблемы не будет. Еще один плюс спрайтов - экономия места. Скажем у вас есть какой то плагин, типа слайдера, и к нему идут несколько десятков изображений (уголки рамок, сами рамки, стрелки, буллиты, икокни соц сетей и так далее). Так вот, когда они все заключены в одну картинку, это намного удобнее и аккуратнее смотрится, если бы они валялись в папке с изображениями по отдельности.
Что изображено на этих иконках
По обычаю расскажу, какие изображения есть среди этих иконок, чтобы вы могли найти нужную иконки по поиску, который у меня находитсья в главном меню наверху сайта: замок, робот, алмаз или драгоценный камень, монитор, подарок, микрофон, ракета, мороженное, человек, часы, ножницы, иконки всяких социальных сетей и сервисов, гаечные ключи, лук, кошелек, ipad, арбуз, кошелек, джойстик игровой, калькулятор, клоун, лампочка, лук, мусорное ведро или корзина, письмо, глобус, бургер, авто, облако, фотоаппарат и многое многое другое. Всего порядка 100-а изображений.
Подключаются эти иконки очень просто:
1. Подключаем css файл sprite.css таким образом: создаем папку css в корне вашего сайта, закидываем туда этот файл css, а на странице, где будут отображаться иконки между тегами
вставляем следующий код:
3. В месте, где вы хотите поставить иконку, вставляем код:
4. Вы можете пользоваться моей демо, там есть все представленные иконки и с помощью google chrome просмотрщика элемента определить название иконки и вставить вместо "название иконки". Допустим, иконка с изображением часов имеет такой код:
Ну я думаю, что разобраться, как вставлять эти икокни из спрайта не сложно, тем более я уже все объяснил:)) Приятного пользования!
Продолжаем социализировать наши сайты.Читателям часто удобно получать обновления блогов прямо в их любимую социальную сеть. Давайте дадим им такую возможность. Для этого нужно зарегистрироваться в этих самых соц.сетях. Можно создать профиль администрации или автора сайта, а можно публичную страницу компании или проекта. В дальнейшем нужно будет регулярно публиковать в новостные ленты профилей новости и обновления сайта, чтобы ваши подписчики могли с ними ознакомится. Это, кстати, удобно делать с помощью установленных нами ранее . Ссылки на социальные профили оформим с помощью приёма CSS sprite или спрайты на CSS.
Что такое CSS спрайты и спрайты в общем?
Спрайты — набор маленьких картинок, которые объединены в одну. Это делается для того, чтобы не загружать 10-20 маленьких легковесных картинок с сервера на компьютер пользователя, а отдать их одним потоком, объединив в один файл. Спрайты в веб-дизайн пришли из игровой индустрии, там они использовались для создания анимированной 2D графики, например стреляющих монстров и т.п.
В дизайне сайтов тоже применяют приём, при котором различные иконки объединяют в один файл, например вот так:
Как можно увидеть в этом примере в один файл собрали не только иконки соц.сетей, но и другие элементы дизайна, такие как стрелочки, кнопки «мне нравится» и т.п. Но объединять абсолютно всю графику, которая используется на сайте в один спрайт не совсем правильно. Лучше поделить элементы на группы и подгружать только необходимые на определённом типе страниц.
На этой картинке я постарался схематически показать принцип работы css спрайтов. В случае когда блок больше фоновой картинки, то она по умолчанию помещается в левый верхний угол, если в css стилях задано no-repeat. Но мы можем менять положение фоновой картинки относительно левого верхнего угла блока. Особенно это полезно, если блок, например, по размеру равен отдельной иконке. У нас семь иконок размером 32х32 каждая. Они расположены по горизонтали, соответственно по вертикали нам положение фона изменять не нужно. Задаём положение фонового рисунка -32 px получаем в блоке иконку , -64 px — иконку Фейсбук и т.д.
Как сделать кнопки-ссылки на профили в социальных сетях?
После регистрации в соответствующих сообществах и в я получил ссылки на профили, адрес моей RSS ленты и ссылку на форму подписки для получения обновлений по почте. Затем я их объединил в следующий код и вставил его в текстовый виджет в панели администрирования WordPress:
В анкоре ссылок в этом коде используется тег : . Именно он и является тем самым блоком, в котором отображается нужная иконка. Сдвиг фонового изображения задаётся в файле стилей style.css через свойство background-position :
/* Кнопки подписки на обновления*/ .spmenu { padding: 0px; margin: 0px; color: #4682B4; text-align: left; font-size: 100%; } .spmenu a, .spmenu a:hover { cursor: pointer; color: #1E90FF; text-decoration: none; font-size: 100%; } .spmenu span { display: inline-block; width: 32px; height: 32px; background: url("images/icons.png") no-repeat; } .spmenu span.sprite_gplus {background-position: 0px 0px;} .spmenu span.sprite_twitter {background-position: -32px 0px;} .spmenu span.sprite_fbook {background-position: -64px 0px;} .spmenu span.sprite_rss {background-position: -96px 0px;} .spmenu span.sprite_email {background-position: -128px 0px;}
Таким образом для каждого элемента внутри класса «spmenu » задаётся фоновое изображение icons.png , которое представляет из себя набор иконок. Заметьте, что является строчным встроенным элементов по спецификации HTML, поэтому, чтобы задать ему строгие размеры (ширину и высоту), мы должны изменить способ его отображения на блочный в CSS свойствах (строчка: display: inline-block; ). Размеры блока 32х32 как раз соответствуют формату наших иконок.
Часто вместо
используют теги
,
,
и т.п., я считаю этот подход неправильным. Зачем изменять стили стандартных тегов, если есть универсальный
. А тег
вообще создаёт лишний запрос к серверу, а мы как раз, применяя спрайты, пытаемся сократить число этих запросов.
Где взять иконки для спрайта?
- Нарисовать самому.
- Поискать в поисковике среди картинок.
- В Сети есть специальные подборки иконок, которые часто раздаются бесплатно.
- Многие соц.сети и сервисы выставляют на сайтах официальные логотипы и иконки, которые можно использовать в своих приложениях.
- Чтобы сделать файл спрайтов иконок соц.сетей автоматически, можно воспользоваться сервисом . Выбираем иконки в нужном порядке, сохраняем архив со скриптом, распаковываем и видим картинку icons.png — готовый файл спрайтов.
Спрайты кроме отображения иконок полезны при разработке анимированного меню, когда при наведении на его пункт, он либо затемняется, либо загорается. Тогда в файле спрайтов хранят два набора кнопок и по событию «наведение мыши» динамически при помощи JS меняют положение фонового рисунка.
Обещанное вначале заметки меню кнопок-ссылок на каналы получения обновлений сделано, на этом заканчиваю статью. Подписывайтесь на обновления, самое интересное только начинается.
