HTML ШАБЛОНЫ САЙТОВ
Современные готовые адаптивные HTML 5 шаблоны.
Откройте для себя мир современных и оригинальных шаблонов сайтов...
АДАПТИВНЫЕ ШАБЛОНЫ шаблоны сайтов
Независимо от устройства, Вам будет удобно пользоваться сайтом.
Изображения будут большими, а текст четким! шаблоны сайтов

Подключаем шрифтовые иконки к сайту

Шрифтовые иконки для сайта — это шрифт, который содержит в себе набор иконок различных тематик. Практически каждый современный сайт (шаблон сайта) использует шрифтовые иконки (иконочные шрифты) и на то есть своя причина. Найти иконки которые идеально подойдут для Вашего сайта очень трудно, ведь нужно учесть их размер, цвет, стиль, тематику и т.п. Представьте ситуацию, когда вам не надо этим заниматься, Вы можете самостоятельно прописать иконке цвет, размер и она всегда будет подходить вам по стилю! Кажется невероятно, но для этого и нужны шрифтовые иконки.

Основные преимущества шрифтовых иконок:

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

Подключение иконок - шрифтов происходит в несколько этапов: 

Simplicons Free Download1) Скачиваем архив со шрифтовыми иконками и разархивируем.

 

2) Далее нужно загрузить файлы на сервер:

  • Находим Css файл с названием шрифта (например: simple-line-icons.css) и загружаем на сервер (как вариант через FTP). На сервере, скорее всего вы найдете папку CSS в корне сайта (если нет, то создайте ее) положите шрифт в нее.

 

3) Теперь нужно подключить стиль (шрифтовые иконки) к сайту.

  • • Чтоб подключить иконочный шрифт нужно вставить код подключения css файла между тегами <head> </head>
  • • <link rel="stylesheet" href="/css/simple-line-icons.css"> 
  • Обратите внимание! Строка ---> href="/css/simple-line-icons.css" ---> указывает на путь к шрифту относительно корня сайта (если вы сохранили файл в другом месте, то измените путь).

 

4) После того как мы подключили шрифт с иконками, мы можем вставлять иконки в любом месте сайта. Давайте попробуем:

  • В месте, где вы хотите вставить иконку, нужно вставить следующий код:
  • <span class="имя иконки"></span>  ---> например: <span class="icon-user"></span>

 

P.s. Не забывайте, что иконка - это шрифт и ей можно управлять, так же как и шрифтом (font-size, font-weight, line-height и т.д.).

 

Похожие материалы

 
html ru 240x400
Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript!

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

Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.

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

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.