Landing Page. Как работать с социальными иконками

Из этого туториала Вы узнаете, как работать с социальными иконками в шаблонах Landing Page.

Для того чтобы изменить иконки, следуйте таким инструкциям:

1. Во-первых, найдите элемент, для того чтобы узнать его класс, используя инструмент Firebug, который можно включить, нажав правой кнопкой мышки на экран и выбрав Исследовать элемент (Inspect Element) из выпадающего списка:

   

2. Узнайте класс CSS иконки, которую Вы хотите изменить.

3. Откройте файл ‘site/css/material-design.css’ и найдите значение, которое Вы бы хотели использовать вместо значения по умолчанию.

4. Откройте файл style.css из папки css вашего шаблона. Вставьте класс CSS иконки вниз файла и убедитесь, что после него есть строка со свойством ‘content’:

   


5. Вставьте новое значение свойства «content» в файл style.css. Не забудьте использовать ‘!important’, для того чтобы успешно выполнить изменение CSS. В результате, класс CSS должен выглядеть следующим образом:

   		.booking_form .mfIcon span::before {
   		content: "\e009" !important;
   		}

Вы можете также изменить социальные иконки, следуя таким инструкциям:

1. Во-первых, найдите элемент, для того чтобы узнать его класс, используя инструмент Firebug, который можно включить, нажав правой кнопкой мышки на экран и выбрав Исследовать элемент (Inspect Element) из выпадающего списка:

   

2. Для того чтобы изменить социальную иконку, Вам нужно открыть соответствующий файл .html. Вы можете увидеть название файла в адресной строке сайта. В нашем случае, изменения нужно внести в файл index.html:

   

3. Например, откройте область футера и найдите фрагмент кода html, который используется для Instagram. Замените название «Instagram» на «Pinterest»:

4. Последним шагом является замена значка Fontawesome, который используется для Instagram. Откройте следующую ссылку: https://fortawesome.github.io/Font-Awesome/icons/. Здесь Вы найдёте список всех значков и их классов. Вам нужно скопировать название класса значка, который Вам нужен, и вставить его вместо класса Instagram. Например, это будет fa fa-pinterest:

   

5. Замените fa fa-instagram на fa fa-pinterest. Аналогично, Вы можете заменить знак # на любую нужную Вам ссылку. Сохраните изменения и обновите страницу:

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

Вы можете также ознакомиться с детальным видео-туториалом ниже: