<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

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

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Иконки Font Awesome на сайте

Иконки Font Awesome на сайте

Использовать на сайте иконки Font Awesome очень просто и для этого совсем не надо быть дизайнером. Даже если вы не подберёте себе нужную иконку из коллекции бесплатных (1109 free иконок), то всегда можно купить профессиональный набор (1877 pro иконок).

Сегодня мы будем верстать блок - "Контакты". Это пример типичного информационного блока, обычно от находится внизу сайта или на отдельной странице. Если вы думаете, что это нарисовал дизайнер в фотошопе, то глубоко ошибаетесь. Для создания такого блока вообще не нужен Photoshop, достаточно иметь хороший вкус, немного разбираться в HTML5/CSS3 и уметь работать с иконочным шрифтом Font Awesome.

Иконки Font Awesome на сайте.

Работать с иконочным шрифтом мы с вами сегодня научимся, а изучить основы HTML5/CSS3, поможет замечательный видеокурс - "Вёрстка сайта с нуля 2.0".

Как подключить иконки Font Awesome

Официальный сайт: https://fontawesome.com

Самый простой способ подключения - через Font Awesome CDN. Вы просто копируете строчку с ссылкой на файл стилей на официальном сайте и вставляете в свой HTML файл.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML разметка

Создается контейнер div с классом "info-box", внутри которого три элемента li списка ul с двумя span. Span с классом "icon" содержит тег <i></i>, скопированный с сайта Font Awesome при выборе нужной иконки. Между тегами другой span с классом "info" находится контактная информация.

<div class="info-box">
<h2>Контакты</h2> <ul>
  <li>
    <span class="icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
    <span class="info">Ленинский пр. 25, г. Москва</span>
  </li>
  <li>
    <span class="icon"><i class="fa fa-phone" aria-hidden="true"></i></span>
    <span class="info"><a href="tel:+7 (495) 431-95-22">+7 (495) 431-95-22</a></span>
  </li>
  <li>
    <span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></span>
    <span class="info"><a href="mailto:info@salon.ru">info@salon.ru</a></span>
  </li>
</ul>
</div>

Так выглядит блок на промежуточном этапе, на голом HTML.

Иконки Font Awesome на сайте.

Работа с иконками в CSS файле

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

ul li .icon {
    position:relative;
    top: 2px;
    display: inline-block;
    width: 25px;
    color: #9c27b0;
    vertical-align: top;
}

Живой пример в браузере, после стилизации.

Верстальщику на заметку

Некоторые дизайнеры в своих PSD макетах используют готовые иконки, установленного шрифта Font Awesome Regular. Начинающего верстальщика это может сбить с толку и вместо того, чтобы вставить иконку через тег <i>, он вырежет иконку и вставит, как картинку. Так делать не надо, это крайне непрофессионально!

Смотрите весь код на jsfiddle.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.