Примеры кода

После того, как Вы скачали иконки, перед Вами открывается море возможностей :) На этой странице преведенно несколько примеров, как использовать rss исконки с минимумом css и html кода.

Использование RSS кнопки в тексте

Можно использовать иконку перед текстом ссылки. Можно использовать в анкоре ссылки только текст, без rss кнопки, однако, чтобы кнопка была в ссылке.

Например:

Поддержи блога прогресс, подпишись на RSS.

HTML:

<a href="#" class="feed">подпишись на RSS</a>

CSS:

.feed {
  margin-left: 3px;
  padding: 0 0 0 19px;
  background: url("../images/feed-icon-14x14.png") no-repeat 0 50%;
}

Показать список фидов

Если ваш сайт или блог содержит более одного RSS фида, то можно вывести их список.

Например:

HTML:

<ul class="feed-list">
  <li><a href="#">Все сообщения</a></li>
  <li><a href="#">Категория 1</a></li>
  <li><a href="#">Категория 2</a></li>
  <li><a href="#">Комментарии</a></li>
</ul>

CSS:

.feed-list {
  margin: 0 0 15px 15px;
  padding: 0;
  list-style-type: none;
}

.feed-list li {
  margin: 0 0 10px 0;
  padding: 0;
  list-style-type: none;
}

.feed-list li a {
  padding: 0 0 0 19px;
  background: url("../images/feed-icon-14x14.png") no-repeat 0 50%;
  list-style-type: none;
}

Стильная CSS кнопка

Можно оформить ссылку на rss в качестве стильной кнопки.

Измените шестнадцатиричное значение цвета, чтобы кнопка соответствовала дизайну вашей страницы. Самый простой способ получить нужные цвета- это создать документ в Фотошопе, и заполнить его нужным цветом, а затем применить некоторые эффекты слоя (layer effects). Добавить "Конус и Барельеф" ("Bevel and Emboss"), и установить размер 0. Это даст вам тонкие конические контуры, как в кнопке- примере ниже. Используйте инструмент "пипетку" , чтобы получить шестнадцатиричное значение цвета каждого края.

Пример:

Лента комментариев

Лента Комментариев

HTML:

<p class="feed-button"><a href="#">Лента Комментариев</a></p>

CSS:

.feed-button {
  padding: 10px 0;
}

.feed-button a {
  color: #666;
  padding: 10px 15px 10px 36px;
  background: #ccc url("../images/feed-icon-14x14.png") no-repeat 15px 50%;
  border-top: 1px solid #e2e2e2;
  border-right: 1px solid #818181;
  border-bottom: 1px solid #565656;
  border-left: 1px solid #d7d7d7;
}

.feed-button a:hover {
  color: #444;
  background: #eee url("../images/feed-icon-14x14.png") no-repeat 15px 50%;
  border-top: 1px solid #f5f5f5;
  border-right: 1px solid #969696;
  border-bottom: 1px solid #646464;
  border-left: 1px solid #f2f2f2;
}