[Матрос]

Приветствую начинающих мастеров Rebill.me. Хочу поделится очень удобным сервисом, которым часто пользуюсь сам - это сервис icon fonts generator http://fontello.com.

Для чего он? С первого взгляда даже начинающему вебмастеру будет ясно - это сервис дающий пиктограммы (они же иконки) в виде шрифта. Что дает возможность встраивать их в сайт без каких либо внешних ссылок и способностью отображаться даже при отключенной графике. А при современных достижениях CSS3 таких как градиент, тени, псевдообъем, такие псевдошрифты делают огромную конкуренцию иконкам-картинкам. Как же он работает - очень просто. Выбираем иконки какие над надо. Давай для примера возьмем картинку, например, для группы в Вконтакте и для Google plus. Т.е. у вас есть группы в эти социалках и вы хотите разместить эти ссылки у себя на сайте.

Далее скачиваем подготовленный материал на компьютер и распаковываем.

из того что реально вам понадобится, это папка

fonts в полном составе,
css (тут оставляем файлы icons.css и icons-ie7.css) имя файлов которые мы оставили писались при скачивании -слева от кнопки

и из файла demo.html берем строки

 <link rel="stylesheet" href="css/icons.css">
    <!--[if IE 7]>
    <link rel="stylesheet" href="css/icons-ie7.css">
    <![endif]-->

<i class="icon-gplus"></i>

<i class="icon-vk"></i>

Как видите картинками тут и не пахнет, а если открыть страницу увидите

теперь применим их на практике

берем ссылку на свою группу в ВК

<a href="http://vk.com/XXXXXXXXXXX">вступить в группу</a>

и превращаем ее в

<a href="http://vk.com/XXXXXXXXXXX"><i class="icon-vk"></i></a>

так же можно поступить и с группой в Гугл плюс и файсбук и т.д. я уже не говорю о всяких стрелочках, рюшечках и т.п. Плюс ко всему размер этих иконок будет меняться по вашему желанию без искажения качества. Как это сделать? - вернемся к ссылке. если посмотреть, результат - вы увидите не самую красивую картинку - просто иконка ВК или G+. Чтоб сделать что-то похожее на кнопку открываем файл css/icons.css
и редактируем блок

 [class^="icon-"]:before, [class*=" icon-"]:before {

и добавляем
отступ
размер шрифта иконки
округление углов
и цвет самой надписи в кнопке

  padding:10px;
  font-size:18px;
  background:#3399FF;
  border-radius:25px;
  color:#FFFFFF

в итоге имеем

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  padding:10px;
  font-size:18px;
  background:#3399FF;
  border-radius:25px;
  color:#FFFFFF;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

то же самое делаем в стилях под ИЕ7, если вы его используете, конечно.

Все, наслаждаемся стильными кнопками без картинок.

Такие элементы можно использовать и для навигации, в меню, в оформлении новостей, все зависит от вашей фантазии. Тут я указал минимальное декорирование пиктограмм, при желании можете добавить и градиенты, и тени, все это легко находится с помощью поисковиков, или спросить тут можно

[VerTus]

Удобный сервис и шустрый интерфейс - в копилку добавлю однозначно

[miraida]

Простите, столько лишнего кода для какой то кнопки?

[Alsu]

А по мне так это скорей всего развёрнутый код, который потом под себя затачиваешь - имхо болванка, которую надо запилить до адекватного состояния, ведь в сети бродят не только мега-гуру miraida с Матросом, но и те кто только вникает во всё это ремесло и начинает с азов, чтоб потом подняться до вершин, и уже тем более не надо рабочий инструмент использовать не по назначению

[Матрос]

miraida, а что так смущает? Весь сторонний код находится во внешних файлах, да и код это только стиль для кнопки. Т.е. размер самого файла не увеличивается, скорость загрузки практически не меняется, зато никаких картинок не надо. Юзеру надо всего две строчки в основной файл вставить - проще уже некуда. Конечно делать спрайтами солиднее, но не все начинающие смогут, согласитесь . Или я что-то не так понял? интересно выслушать