Лого www.SiteHere.ru

Бесплатные иконки для сайта

Минимализм распространяется с большой скоростью. Дизайн в этом стиле становится очень популярным и он набирает популярность. Я считаю что необходимо идти в ногу со временем и стараться совершенствовать свой сайт постоянно. Помните как я в прошлом уроке создал смурфика на чистом CSS? Похожим образом созданы иконки для сайта, о которых я Вам расскажу сегодня.

Четыре части статьи «Невероятный CSS» можно найти по ссылкам здесь:

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

Вы сможете установить любую иконку, из тех что мы рассмотрим ниже, себе на сайт не более чем за 20 секунд!

Краткий обзор сервиса бесплатных иконок для сайта

Перейдите на этот сайт — ПЕРЕЙТИ. Первым делом Вы увидите всё множество иконок, которое Вам предлагается на выбор!

CSS3 иконки

Если Вы нажмете вправо, влево или воспользуетесь навигацией по страницам (внизу), то можете увидеть все иконки, которые доступны на этом сервисе:

CSS3 иконки в красном блоке

Чтобы при просмотре страниц чтобы у Вас не разбегались глаза — иконки сгруппированы в цветовые блоки.

Зеленый блок с иконками
Коричневый блок с иконками
Голубой блок с иконками

Как установить иконку для сайта?

Всё настолько просто, что каждый буквально в три клика может разместить любую понравившуюся иконку на свой сайт.

Для начала необходимо сделать активным тот набор, в котором Вам понравилась иконка. И затем просто один раз кликнуть на неё. Появиться окошко с кодом и окном предпросмотра выбранной иконки. Внизу окна предпросмотра можно посмотреть какими браузерами поддерживается данная иконка (т.е. в каким она будет отображаться так как задумывалось):

Установка иконки

Для начала нужно скопировать HTML код, а именно, тег <span> с его классом:

1
2
<span class="demoSpan1">
</span>

И обязательно нам нужно взять код, который находится между тегами <style></style>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
span { 
    height:40px; 
    width:40px; 
    display:block; 
    position:relative;
} 
 
.demoSpan1 { 
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px; 
 
    background:#333;
}
 
.demoSpan1:after, .demoSpan1:before { 
    content:''; 
    height:28px; 
    width:6px; 
    display:block; 
    background:#fff; 
    position:absolute; 
    top:6px; 
    left:20px; 
 
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px; 
 
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
}
 
.demoSpan1:before { 
    height:12px; 
 
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
 
    top:18px; 
    left:8px;
}

Вы его скопируете и он не будет так красиво выглядеть как у меня, потому что этот код я отформатировал, чтобы Вы поняли где и что нужно изменять.

Вот что нужно изменять код себя: строки со 2-й по 5-ю можно вставить в класс demoSpan1, потому что у Вас на странице однозначно есть другие элементы с тегом <span>, которым можно случайно испортить внешний вид. А также хочу заметить: если Вы поменяете класс у тега <span>, то в стилях CSS его также нужно изменить.

Видео — «Нюансы установки иконок»

На видео я показал пример установки иконок для сайта на своём блоге. Также на видео я сказал один нюанс, который может присутствовать в процессе установки иконок. Его легче объяснить и показать на реальном примере:

Вывод

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

Плюсы от использования этих иконок:

  • + Уменьшают размер HTTP-ответа
  • + Безупречное отображение на экранах iOS устройств
  • + Меньше изображений на сайте
  • + Просты в применении: скопировал — вставил на сайт

Успехов!

С Уважением, Юрий Немец

Бесплатные иконки для сайта 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

4 комментария к записи
  • Михаил

    Говоря о плюсах, не забывайте о минусах.
    1. Отображается по разному в разных браузерах на разных машинах.
    2. Проблемы с масштабированием.

     
  • Егор

    Здравствуйт, Юрий, я часто посещаю твой сайт, уже несколькими статьями воспользовался. Очень полезные статьи.
    А что думаешь насчет font awesome? Я раздумываю, использовать их или нет? Сейчас потихоньку делаю себе оригинальную дочернюю тему (не все же людям темы править) 🙂 Я планирую подгружать иконки прямо с awesome. Ну можно еще и скачать архивчик, на всякий случай. Или есть поинтересней вариант? Кроме CSS3 icons ?

    А я пробовал библиотеку google вместо установленной на WordPress, так некоторые скрипты с ней не работают. Правда давненько это было. А так, естественно, у google сервер мощнейший.

     
    • Юрий

      Привет, Егор! Font Awesome классный вариант. Но на сайте есть материалы (по иконкам) как будто прямо для тебя сделаны: ПЕРЕЙТИ!

       
      • Егор

        Спасибо, не увидел сразу.

         

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *