Перейти к содержимому


konffeta

Регистрация: 10 июля 2018
Offline Активность: 10 мая 2020 14:58
-----

Мои сообщения

В теме: Иконки

10 Май 2020 - 13:31

Просмотр сообщенияsauron.089 (07 Июль 2015 - 11:33) писал:

Спасибо за ресурс! Разобрался и настроил! Как делать:

1.Скачиваем архив  "font-awesome.zip" (прикрепил)

2.Устанавливаем  font-awesome.min.CSS  (CАЙТ-ДОБАВИТЬ ФАЙЛЫ) и прописываем в  HTML
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
   между <head></head> .

3. Заходим на этот ресурс http://fortawesome.g...-Awesome/icons/ и в поисковой строке ищем желаемую иконку,например, VK.

4. Нажимаем на появившуюся иконку VK и видим код
 <i class="fa fa-vk fa-3x"></i>
, копируем и вставляем в HTML, я вставлял на место прошлых иконок в подвал сайта.

5. Опять ищем желаемые иконки и повторяем действия снова,вставляя код на строчку ниже предыдущего (вот так)

<i class="fa fa-vk fa-3x"></i> <!--ИКОНКА "ВК"-->
<i class="fa fa-instagram fa-3x "></i> <!--ИКОНКА "ИНСТАГРАММА"-->
<i class="fa fa-twitter fa-3x "></i> <!--ИКОНКА "ТВИТТЕРА"-->
6. Изменяем тег <i> на тег <a> ,было как в 5 пункте,а стало:

<a class="fa fa-vk fa-3x "></a>
<a class="fa fa-instagram fa-3x "></a>
<a class="fa fa-twitter fa-3x "></a>

7. Теперь можно добавлять ссылки на ваши социальные сети  
<a class="fa fa-twitter fa-3x" href="ссылка на ваш профиль в соц.сети"></a>

8. Изменять цвет иконок и цвет при наведение указателя можно добавив в main.css
a.akon {
color:#ваш цвет
transition: 320ms linear;
}
a.akon:hover {
color:#ваш цвет


a.akona {
transform: translateX(20px);
}

a.akonb {
transform: translateX(10px);
}
   Первый пункт "color" меняет статичный цвет,а второй меняет цвет и наведении мыши. Можно добавить плавный переход цвета параметром "transition: 320ms linear;", или убрать его,чтобы цвет менялся мгновенно.

9. Далее в HTML исправить


  
<a class="fa fa-vk fa-3x "></a>
<a class="fa fa-instagram fa-3x "></a>
<a class="fa fa-twitter fa-3x "></a>
   на
<a class="fa fa-vk fa-3x akon" href="Ссылка на ваш профиль в соц.сети"></a>
<a class="fa fa-instagram fa-3x akon akonb " href="Ссылка на ваш профиль в соц.сети"></a>
<a class="fa fa-twitter fa-3x akon akona" href="Ссылка на ваш профиль в соц.сети"></a> 

10. Размер иконок можно регулировать параметром
<a class="fa fa-vk fa-[color=#ff0000]3x[/color] "></a>

Меняя это значение на:
lg-маленькая
2x-больше





В итоге получаются вот такие иконки (см. скриншот) или на самом сайте, в подвале nerana.ru
Спасибо за внимание,надеюсь пригодится информация Изображение
увы но ваш мануал подключает иконки по внешней ссылке из интернета и выполнить из него нужно всего лишь второй пункт, а все остальные действия бесполезны