Иконки Вконтакте, Твиттер, Фейсбук для сайта

Автор
Опубликовано: 1430 дней назад (20 ноября 2013)
Блог: Media blog
Рубрика: Php, HTML, CSS и веб
0
Голосов: 0

Стильные иконки для сайта


В этом уроке я расскажу как установить стильные круглые иконки Вконтакте, Твиттера и Фейсбука себе на сайт с помощью HTML и CSS.

1. Загружаем фоновую картинку на сайт в папку /img
Скачать фоновую картинку

2. Добавляем параметры стиля на страницу
Вставляем между тегами <head>...</head> на главную страницу сайта следующий код:
Код PHP:
  1.  
  2. <style>
  3. a.vk, a.tw, a.fb {background: url(img/vk.png); display:block; width:52px; height:44px;}
  4. a.tw {background-position: -52px 0;}
  5. a.fb {background-position: -110px 0;}
  6. </style>
  7.  
3. Вставляем собственно кнопки (иконки) социальных сетей
В нужное место, в котором в хотите видеть иконки, вставьте следующий код:
Код PHP:
  1. <table>
  2. <tr>
  3. <td><a class="vk" href="ссылка на вашу страницу вк"></a></td> <td><a class="tw" href="ссылка на вашу страницу в твиттере"></a></td> <td><a class="fb" href="ссылка на вашу страницу фейсбук"></a></td>
  4. </tr>
  5. </table>
Вот и все, приятного использования!
Комментарии (0)

Нет комментариев. Ваш будет первым!