Как вставить иконки взамен имеющихся? В icon.css нашел целый список иконок,но как их присобачить к сайту,не пойму пытался вместо <a class="sbtnf sbtnf-rounded color color-hover icon-youtube" href="#"></a> (icon-yotube) прописать instagram,он появлялся,но не выделял значок инстаграмма,а цвет показывал. Помогите,пожалуйста.
ВОТ,НАПРИМЕР,ДОБАВИЛ ИКОНКУ APPSTORE ПУТЕМ ПРОПИСИ В HTML СТРОКИ <a class="sbtnf sbtnf-rounded color color-hover icon-appstore" href="#"></a> , вот что получается (
Аккаунт SL-332461
0
Иконки
Автор sauron.089, 02 июля 2015 14:58
Сообщений в теме: 5
#1
Отправлено 02 Июль 2015 - 14:58
#2
Отправлено 05 Июль 2015 - 13:00
ааааааааааааааауууууууууууууууууууууууууууууууууу,неужели это такой трудный вопрос?
#3
Отправлено 07 Июль 2015 - 04:21
Судя по всему, данная иконка отсутствует.
Как вариант, можно скачать обновленную версию шрифтовых иконок и подключить дополнительным файлом:
http://fortawesome.g...o/Font-Awesome/
Как вариант, можно скачать обновленную версию шрифтовых иконок и подключить дополнительным файлом:
http://fortawesome.g...o/Font-Awesome/
#4
Отправлено 07 Июль 2015 - 09:53
Vaccina (07 Июль 2015 - 04:21) писал:
Судя по всему, данная иконка отсутствует.
Как вариант, можно скачать обновленную версию шрифтовых иконок и подключить дополнительным файлом:
http://fortawesome.g...o/Font-Awesome/
Как вариант, можно скачать обновленную версию шрифтовых иконок и подключить дополнительным файлом:
http://fortawesome.g...o/Font-Awesome/
Спасибо,что ответили! Но,не могли бы Вы помочь и с этим вопрос Я скачал полностью архив с главной страницы. Какие файлы подключать? В .css только два файла и похожу не связанных с иконками,а с less я вообще не знаком Спасибо,жду ответа! До сих пор мучаюсь с иконками
#5
Отправлено 07 Июль 2015 - 11:33
Vaccina (07 Июль 2015 - 04:21) писал:
Судя по всему, данная иконка отсутствует.
Как вариант, можно скачать обновленную версию шрифтовых иконок и подключить дополнительным файлом:
http://fortawesome.g...o/Font-Awesome/
Как вариант, можно скачать обновленную версию шрифтовых иконок и подключить дополнительным файлом:
http://fortawesome.g...o/Font-Awesome/
Спасибо за ресурс! Разобрался и настроил! Как делать:
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
Спасибо за внимание,надеюсь пригодится информация
Прикрепленные файлы
Сообщение отредактировал metry: 21 Июнь 2017 - 11:14
#6
Отправлено 10 Май 2020 - 13:31
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
Спасибо за внимание,надеюсь пригодится информация
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных