Отправлено от
sauron.089 (07 Июль 2015 - 11:33) писал:
Спасибо за ресурс! Разобрался и настроил! Как делать:
1.Скачиваем архив "font-awesome.zip" (прикрепил)
2.Устанавливаем font-awesome.min.CSS (CАЙТ-ДОБАВИТЬ ФАЙЛЫ) и прописываем в HTML
3. Заходим на этот ресурс http://fortawesome.g...-Awesome/icons/ и в поисковой строке ищем желаемую иконку,например, VK.
4. Нажимаем на появившуюся иконку VK и видим код
5. Опять ищем желаемые иконки и повторяем действия снова,вставляя код на строчку ниже предыдущего (вот так)
7. Теперь можно добавлять ссылки на ваши социальные сети
8. Изменять цвет иконок и цвет при наведение указателя можно добавив в main.css
9. Далее в HTML исправить
10. Размер иконок можно регулировать параметром 3х
Меняя это значение на:
lg-маленькая
2x-больше
3х
4х
5х
В итоге получаются вот такие иконки (см. скриншот) или на самом сайте, в подвале nerana.ru
Спасибо за внимание,надеюсь пригодится информация
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. Размер иконок можно регулировать параметром 3х
<a class="fa fa-vk fa-[color=#ff0000]3x[/color] "></a>
Меняя это значение на:
lg-маленькая
2x-больше
3х
4х
5х
В итоге получаются вот такие иконки (см. скриншот) или на самом сайте, в подвале nerana.ru
Спасибо за внимание,надеюсь пригодится информация
